Help us understand the problem. What is going on with this article?

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.shgulpfile.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を実行します。

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

h-matsufuji
SIerの会社員です。 最近はDockerを触ることが多いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away