今回の記事は前回の記事の続きである。
Reactによるアプリの開発の流れの最終段階。
Production Phaseにおいては、Dockerfile.dev ではなく、Dockerfileを書くことになる。
このProductionのためのDockerfileには『FROM』が2つ以上書かれ、2つのステージに分けてDocker Imageが作られることになる。(マルチステージビルドと呼ばれる)
今回の記事では
- なぜProduction(本番)ではマルチステージビルドが必要になるのか
- Production用のサーバーで人気なnginxの概要
を書いていく
#npm run start とnpm run buildの違い
npm run startではDevelopment用のサーバーも実行されていた
それがProduction Phaseに移り、npm run buildを実行するとDevelopment Phaseの時に実行されていたDevelopment用のサーバーがなくなる。
npm run build は、Development Phaseの時に複数のファイルに分かれていたHTML CSS Javascriptなどを1つのファイルにして吐き出すことになる。その時にWebサーバーは用意されない。
##なぜnpm run buildではサーバーが実行されないのか
Development phaseにおいてはソースコードを書き換えたり、その書き換えたソースコードをreloadしてくれるサーバーが必要であった。
それが、Production phaseではソースコードを書き換えることが無いのでDevelopmentの時とは違うサーバーが必要。
Productionの段階で必要なサーバーは
ブラウザーからのリクエストに反応して、ReactアプリケーションのコードやHTMLコードなどをレンダリングしてくれるだけの機能を持ったWebサーバー。
このProductionのためのWebサーバーで最も人気のあるものの1つが『nginx』になる。
では、『npm run build』のコマンドを実行するためにベースのイメージにnodeを使ったのに、サーバーはnginxで実行するというのを可能にするにはどのようにDockerfileを書けばいいだろうか？
npm run buildを実行するために、ベースイメージにnode:alpineを使ったContainerをさらに、nginxのイメージを使ってWebサーバーを作るにはどうしたら良いのだろうか？
#マルチステージビルドのDockerfile
ステージを分けてDockerfileを書くことで上記の問題を解決する事ができる
buildステージによって、HTML CSS JavaScriptコードからbuildファイルを作る
runステージによって、nginxのwebサーバーを実行させる。