はじめに

以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。
既にプロジェクトがある場合は、適時読み替えてください。

Dockerの本番環境用意

「docker-compose.yml」と同じ階層に「docker-compose.prod.yml」を作成する。

「docker-compose.prod.yml」に以下の内容を記載する。
※「npm run production」の部分のみ修正されています。

# docker-composeのバージョン
# https://docs.docker.jp/compose/compose-file/compose-file-v3.html
version: "3.8"

services:
  react-app:
    # 環境構築
    # dockerfileを指定して「Dockerfile」にて環境構築を実施
    build:
      context: .
      dockerfile: Dockerfile
    # バインドマウント、ホスト側のファイルやディレクトリをコンテナ側にマウント
    volumes:
      - ./:/src
    # 起動時コマンド
    command: sh -c "npm install && npm run production"
    # ホスト側とコンテナ側の両方のポートを指定(ホスト側 : コンテナ側)
    # ポートを1つのみ指定した場合は、ホスト側にランダムなポート番号が割り当てられる
    ports:
      - "3000:3000"
    # 標準入出力とエラー出力をコンテナに結びつける
    stdin_open: true

package.jsonの内容を修正

以下の通り、「scripts」の中を修正する。
「production」の部分を追加します。

"scripts": {
  "start": "webpack-dev-server --config webpack.config.js --port 3000 --progress --profile --static src/",
  "production": "webpack --config webpack.config.js --progress --profile /src"
},

webpack.config.jsの出力先指定

既に記載されていれば対応は不要ですが、以下の記載を行なってください。
ビルド後の出力先の指定です。

output: {
  path: path.resolve(__dirname, "build"),
  filename: "bundle.js",
  publicPath: "/",
},

ビルド実行

以下のコマンドを実行して、ビルドを行います。

docker-compose -f docker-compose.yml -f docker-compose.prod.yml up

ビルドが成功すると、プロジェクト直下に「build」ディレクトリが作成され、内部にhtmlなどが生成されます。
※このhtmlをローカルで開いても、アプリは表示されません。

ビルド後のファイルをローカルで実行

以下のコマンドを実行して、「serve」をグローバルにインストールします。

npm i -g serve

以下のコマンドを実行して、ローカルホストを起動します。

serve -s build

サーバーへのデプロイ

「ビルド実行」で作成した「build」ディレクトリ配下を全てサーバーにアップします。
※Apatchの場合は、「/var/www/html」の配下に「index.html」が入るようにしてください。
※「/var/www/html」の配下に「build」ディレクトリをコピーすると、JSが読み込めず、エラーになります。

SCPコマンドでデプロイする場合には以下のコマンドを参考にデプロイしてください。
※IPとアカウント部分は各自書き換えてください。

scp -r ./build/* root@111.11.11.111:/var/www/html

技術ブログ

プログラミング、IT関連の記事中心

React(TypeScript、Docker、WebPack)のプロジェクトのサーバーデプロイ方法