NUXTJS公式のS3とCloudFrontを使用してAWSへデプロイするには？をdocker-composeで実行する

はじめに

公式ドキュメント内のS3 と CloudFront を使用して AWS へデプロイするには？をdocker-composeで簡単にデプロイする方法をまとめたいと思います。

(公式ドキュメント)S3 と CloudFront を使用して AWS へデプロイするには？

AWS(S3,CloudFront)の設定についてはこちらを参考に作成してください。

1.ファイル構成

nuxtapp/docker-compose.yml
nuxtapp/Dockerfile
nuxtapp/deploy.sh
nuxtapp/gulpfile.js

※deploy.shとgulpfile.jsは公式の手順通り作成してください。

2.Docker化に必要なファイル準備

Dockerfile

FROM node:12.18.3-alpine3.9
RUN apk add --no-cache openssh bash python make
RUN npm install -g gulp
RUN npm install --save-dev gulp gulp-awspublish gulp-cloudfront-invalidate-aws-publish concurrent-transform

docker-compose.yml

version: '3'

services:
  node: &app_base
    build: .
    # tty: true
    working_dir: /var/www
    volumes:
      - .:/var/www
    environment:
      PORT: 3000
      HOST: 0.0.0.0
  install:
    <<: *app_base
    command: npm ci
  dev:
    <<: *app_base
    ports:
      - "3000:3000"
    command: npm run dev
  generate:
    <<: *app_base
    command: npm run generate
  dev_static:
    image: httpd
    volumes:
      - ./dist:/usr/local/apache2/htdocs/
    ports:
      - "80:80"
  s3deploy:
    <<: *app_base
    command: ./deploy.sh

docker-compose.ymlはこちらの記事をyarnからnpmに変更し、コンテナに手動でインストールしていた手順をDockerfileで準備したものです。

3.使用方法

各コンテナは必要に応じでdocker-compose.ymlに定義してください。

アプリの開発環境起動

$ docker-compose up dev

コンテナ内部でnpm run devを実行します。

静的ファイル生成

$ docker-compose up generate

コンテナ内部でnpm run generateを実行します。
出力結果はデフォルトだとnuxtapp/distに出力されます。

出力された静的ファイルのローカルでの動作確認

$ docker-compose up dev_static

ローカルでTomcatコンテナでdistを公開します。
http://localhostにアクセスするとアプリを確認できます。

デプロイ

$ docker-compose up s3deploy

コンテナ内でdeploy.shを実行します。

公式の手順の成功イメージ通りになれば完了です。