Docker+Nginx を使ってシングルページアプリケーションをデプロイする

npm 実行ビルド

gzip オン;
gzip_disable "msie6";
# 0 ～ 9 レベル。レベルが高いほど、圧縮されたパッケージは小さくなりますが、サーバーのパフォーマンス要件は高くなります。gzip_comp_level 9;
gzip_min_length 100;
# Gzip は圧縮された画像をサポートしていないため、フロントエンド リソースのみを圧縮する必要があります gzip_types text/css application/javascript;

サーバー{
 8080を聴く;
 サーバー名 www.frontend.com;

 ルート /usr/share/nginx/html/;

 位置 / {
 インデックス index.html index.htm;
 try_files $uri $uri/ /index.html;
 # 最新の CSS および JS リソースが参照されるように HTML のキャッシュを無効にします。expires -1;
 }

 場所 /api/v1 {
 proxy_pass http://backend.com;
 }
}

ワーカープロセス 1;

イベント { ワーカー接続 1024; }

http {
 ##
 # 基本設定
 ##

 ファイル送信オン;
 tcp_nopush オン;
 tcp_nodelay オン;
 キープアライブタイムアウト65;
 タイプハッシュの最大サイズは2048です。

 /etc/nginx/mime.types を含めます。
 デフォルトタイプ アプリケーション/オクテットストリーム;

 ##
 # ログ設定
 ##

 アクセスログ /var/log/nginx/access.log;
 エラーログ /var/log/nginx/error.log;

 ##
 # Gzip設定
 ##

 gzip オン;
 gzip_disable "msie6";
 gzip_comp_レベル9;
 gzip_min_length 100;
 gzip_types テキスト/css アプリケーション/javascript;

 サーバー{
 8080を聴く;
 サーバー名 www.frontend.com;

 ルート /usr/share/nginx/html/;

 位置 / {
  インデックス index.html index.htm;
  try_files $uri $uri/ /index.html;
  有効期限 -1;
 }

 場所 /api/v1 {
  proxy_pass http://backend.com;
 }
 }
}

nginx:alpineから

nginx.conf をコピー /etc/nginx/nginx.conf
/usr/share/nginx/html をコピーする

アプリケーション名 = spa_nginx_docker
ポート = 8080

建てる：
 docker/Dockerfile をコピーします。
 docker/nginx.conf をコピーします。
 docker build -t $(APP_NAME) を実行します。
 rm Dockerファイル
 nginx.conf を消去する

展開する：
 docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME)

停止：
 docker stop $(APP_NAME)
 docker rm $(アプリ名)
 docker rmi $(アプリ名)

アプリケーション名 = spa_nginx_docker
ポート = 8080

建てる：
 docker/Dockerfile を参照します。
 docker/nginx.conf をコピーします。
 docker build -t $(APP_NAME) を実行します。
 rm Dockerファイル
 nginx.conf を消去する

展開する：
 docker run -d -it -p=$(PORT):$(PORT) --name="$(APP_NAME)" $(APP_NAME)

停止：
 docker stop $(APP_NAME)
 docker rm $(アプリ名)
 docker rmi $(アプリ名)

# 静的リソースのビルド npm run build

# イメージのパッケージ化 make build

# 停止して古いイメージを削除します（最初は無視できます）
停止する

# イメージの起動 make deploy