MERNスタックをDockerでやっていく
はじめに
３０代正社員経験のないクズ人間だけどSHUSHOKUできました！やったー！
うれC！！！！！！！！うれC！！！
MERNスタック使って、ポートフォリオ用にWebアプリ作ってみたけど、大変だった気がします。正直全部大変だし難しいし自分が何やってるかよくわからない感じになります。頭が悪いので整理ができない……(´・ω・｀)
DockerでMERNスタック環境構築したらDocker使っちゃう気持ちもｱｹﾞｱｹﾞでいけるのでは？などと考え、あとからECRやら楽なんじゃね？とか思っていた時期が自分にもありました。
MERNスタックでなんかDockerもつかって気軽に色々できればいいなあというわけで、今後忘れないように書いておこうと思います。
Dockerについては、「何故Dockerなのか」とか、なんか公式読めば良いとかいう風潮がある気がします。
公式は字が多すぎて読む気がおきないみたいなやつはあります。でも、読め！とインターネッツの中の人たちが言ってくるので読みました。読んでもよくわからないので、脳がやばい。
脳みそやわやわな状態でやっているので、やっていける気がしない。
チラシの裏にでも書いてろ！という記事です。でもQiitaに書いたろと思いました。承認欲求モンスターなので。謝罪しておきます。申し訳ございません。
フォルダ構成
とりあえず、こんなん
.
├── README.md
├── backend
│ ├── Dockerfile-dev
│ ├── app.js
│ ├── config.env
│ ├── controllers
│ ├── middleware
│ ├── models
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── routes
│ ├── uploads
│ └── utils
├── frontend
│ ├── Dockerfile-dev
│ ├── build
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── src
├── dev-docker-compose.yml
├── node_modules
├── package-lock.json
└── package.json
メインにフロントエンドとバックエンドそれぞれフォルダを作りその中にdev環境Dockerfileをそれぞれ置いておく。
メインフォルダにはdev環境Docker-compose.ymlをつくる。
とりあえずsudo apt install docker-composeやら色々はやってる状態。
他のフォルダなんかは、皆自由にやっていっていると思います。
基本的に↓
nanka_app_nandemo_yoi_example/
├── node-backend/
│ └── Dockerfile
├── react-frontend/
│ └── Dockerfile
└── docker-compose.yml
こういう構成で作っていきたい気持ち。
バックエンド（MERNのN担当Node.js）
とりあえず動かしたいので、こんな感じに。
FROM node:10.18.0-alpine3.9
EXPOSE 3000
RUN apk add --update curl
WORKDIR /usr/src/app
COPY package.json package-lock.json* ./
RUN npm cache clean --force && npm install && npm install -g nodemon
COPY . .
CMD ["npm", "run", "dev"]
自分にはdev環境とproduction環境をしっかり構成したいという夢がありました
というわけで、devになっていますが、別にDockerfileとしていれば良い。
フロントエンド（MERNのR担当React.js）
担当とか書くと、なんかMERNの中で誰推し？みたいな雰囲気になっていいですね。
皆JS界からきてるわけですし、でかいアイドルグループみたいなもんやろ。しらんけど。
自分は誰推しでもないです、皆むずかしい。もう誰も信じない。
とりあえずこんな感じ
FROM node:10.18.0-alpine3.9
EXPOSE 3000
RUN apk add --update curl
WORKDIR /usr/src/app
COPY package.json package-lock.json* ./
COPY . .
CMD [ "npm", "start" ]
ほぼバックエンド側と変わらない感じのやつ。少しでも、行数を減らしたい。行が増えると絶望感が増す。
COMPOSEファイル（MERNのM担当Mongoあたりも登場）
コンポーズファイル作ります。
こいつがないと私にはなにもできない。
version: "2.2"
services:
mongodb:
image: "mongo"
ports:
- "27017:27017"
backend:
build:
context: ./backend/
dockerfile: Dockerfile-dev
ports:
- "6200:6200"
volumes:
- ./backend:/usr/src/app
depends_on:
- mongodb
frontend:
build:
context: ./frontend/
dockerfile: Dockerfile-dev
ports:
- "3000:3000"
volumes:
- ./frontend:/usr/src/app
depends_on:
- backend
ビルドしたい
docker-compose -f dev-docker-compose.yml buildこれでビルドできる。
あとは毎回docker-compose -f dev-docker-compose.yml upとかすれば良い。
これで、なんか構築はされる感じになっている。
あとはCircleCIがどうとか、Node.js側でAPIがどうのとかReact側でSPAがどうとか、MongoDBでAtlasで某とか、そういうあれでなんかやっていきます。
Author And Source
この問題について(MERNスタックをDockerでやっていく), 我々は、より多くの情報をここで見つけました https://qiita.com/gobo/items/aa5c84df8afaec2605ce著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .