ReactとNginxをDockerizingする方法

Docker(ドコ)にReactとNginxを一緒に展開する方法について説明します。 Reactを展開する際にNginxをセットすることが面倒だったのに Dockerでセッティングをしておけば、後でサーバーを変更するときに便利です。

完成したコードは、GitHubにあります。

前の記事NginxでReactを展開する方法でnginxのWebサーバーにreactを展開する方法について説明しました。

ReactをDockerizing(図コファ)する

まず、Reactアプリが必要です。前へのように基本的なアプリを作成しました。

$ create-react-app myapp
$ cd myapp

そして設定ファイルであるDockerfileファイルを作成します。 プロジェクトフォルダにファイル名を Dockerfileにしては、下記のように入れてください。

FROM node:8.10.0 as builder

# 作業フォルダを作成しnpm設定
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@2.1.3 -g --silent

# ソースを作業フォルダにコピーして、アプリ室
COPY . /usr/src/app
CMD ["npm", "start"]

ここで、nodeのバージョンは8.10.0ですが、私のPCでそのバージョンを送るために同じように合わせてくれました。 Dockerfileを見れば、まず、アプリが実行されるフォルダを作成し、そこにnpmをインストールした後にアプリを実行するようになっています。

準備はすべて終わりました。今docker画像を作成します。

$ docker build -t sample-app .

docker画像が生成された場合、containerを作成して実行します。(ポートは3000に設定)

$ docker run -it -p 3000:3000

正常に動作しますか?私は正常に動作します。 PCで使用していた開発環境をDockerに設定せず、問題が発生する可能性があります。動作がうまくできないなら、もう一度確認してください。

ReactとNginxをDockerizingする

開発を終えて配置を必要がある場合、Webサーバーと一緒にDockerizingする必要があります。ここで、WebサーバとしてNginxを使用してReactとdockerizingました。

Dockerfileを新たに作成する必要があります。 ファイル名を Dockerfile-prodで生成してください。

FROM node:8.10.0 as builder

# 作業フォルダを作成しnpm設定
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@2.1.3 -g --silent

# ソースを作業フォルダにコピーして、ビル
COPY . /usr/src/app
RUN npm run build



FROM nginx:1.13.9-alpine
# nginxの設定を削除して、アプリで設定したファイルをコピー
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx

# 上記の生成されたアプリのビルド成果物をnginxのサンプルアプリが使用していたフォルダに
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

# 80ポートオープンしてnginx室
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

上記は少し違って、npmをインストールして、アプリを起動せずにビルドがあります。 それ以降の設定は、nginxの設定とビルド成果物をnginxのパスのフォルダに移動nginxを実行します。

nginxを設定するには、nginxの設定ファイルを事前に作成おくます。 プロジェクトフォルダに conf/conf.d/default.confフォルダとファイルを作成します。

default.confの内容は以下の通りです。

server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

主な設定内容は、80ポートを使用して、rootパスをreactのビルド成果物があるフォルダに設定します。

今の設定は終わりました。ドコ画像を作成します。 Dockerfile-prodを使用するため、明示的にこのファイルを指定してくれました。

$ docker build -f Dockerfile-prod -t sample-app-prod .

画像が作成されるとcontainerを作成し、実行します。

$ docker run -it -p 80:80 sample-app-prod

よく実行を明るくましたか?問題がなければ、正常に実行されます。

まとめ

ReactとNginxが実行されるようドコイメージを作成しました。 ドコ画像を作成するプロセスが面倒だが、一度作っておけばAWS、Azure、Gcloudのようなクラウドにアプリをセッティングする過程が非常に簡単になります。

参考

Related Posts

codechachaCopyright ©2019 codechacha