Laradock + Nuxt(SSRモード)をAWS Fargateで実行する

前提

同一リポジトリでLaradock ＋ Nuxt(SSRモード)の環境構築
上記のサイトでLaradock+Nuxtで環境構築できていること

参考サイト

手順

1. リポジトリにDocker関連のファイルを追加し修正する
2. DockerfileとDocker-composeの修正する
3. ECRにリポジトリを作成する
4. Dockerをビルドし、イメージをECRへpushする
5. Laravel+NuxtプロジェクトをFargateに乗せる

1. リポジトリにDocker関連のファイルを追加し修正する

Dockerイメージをビルドするために必要なファイルをlaradockからコピーしてくる

cd ./{プロジェクト名}
mkdir docker
cp -r ../laradock/nginx ./docker/nginx
cp -r ../laradock/php-fpm ./docker/php-fpm
cp ../laradock/docker-compose.yml docker-compose.yml
touch ./docker/php-fpm/startup.sh

2. DockerfileとDocker-composeの修正する

AWSの本番環境に乗せるために
リポジトリ内のDockerfileを編集する

./{プロジェクト名}/docker/nginx/Dockerfile

FROM nginx:alpine

LABEL maintainer="Mahmoud Zalt <[e-mail]>"

# nginxの設定ファイルをコンテナ内に配置する
COPY ./docker/nginx/nginx.conf /etc/nginx/
COPY ./docker/nginx/sites/ /etc/nginx/sites-available/
COPY ./docker/nginx/ssl/ /etc/nginx/ssl/
COPY ./docker/nginx/sites/default.conf /etc/nginx/conf.d/

# If you're in China, or you need to change sources, will be set CHANGE_SOURCE to true in .env.

ARG CHANGE_SOURCE=false
RUN if [ ${CHANGE_SOURCE} = true ]; then \
    # Change application source from dl-cdn.alpinelinux.org to aliyun source
    sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/' /etc/apk/repositories \
;fi

RUN apk update \
    && apk upgrade \
    && apk add --no-cache openssl \
    && apk add --no-cache bash \
    # gitをダウンロード
    && apk add --no-cache git \
    && adduser -D -H -u 1000 -s /bin/bash www-data

# AWS fargateではdepends_onやlinkでのコンテナ通信を行えないため、コンテナ名(php-fpm)では接続できない
# そのため127.0.0.1で通信を行う
ARG PHP_UPSTREAM_CONTAINER=127.0.0.1
#ARG PHP_UPSTREAM_CONTAINER=php-fpm
ARG PHP_UPSTREAM_PORT=9000

# Set upstream conf and remove the default conf
RUN echo "upstream php-upstream { server ${PHP_UPSTREAM_CONTAINER}:${PHP_UPSTREAM_PORT}; }" > /etc/nginx/conf.d/upstream.conf \
    && rm /etc/nginx/conf.d/default.conf


# nginxコンテナ内でNuxtをSSRモードで立ち上げるためにnpmをインストールする
RUN apk add --update nodejs nodejs-npm

# ワーキングディレクトリの指定
WORKDIR /var/www

# ソースコードをコンテナにコピーする
COPY . .

# Nuxtをビルドする準備をする
RUN npm install

# foreverモジュールを入れて、Nuxtサーバをバックグラウンドで起動できるようにする
RUN npm install -g -y forever

ADD ./docker/nginx/startup.sh /opt/startup.sh
RUN sed -i 's/\r//g' /opt/startup.sh
CMD ["/bin/bash", "/opt/startup.sh"]

EXPOSE 80 443

./{プロジェクト名}/docker/php-fpm/Dockerfile

#
#--------------------------------------------------------------------------
# Image Setup
#--------------------------------------------------------------------------
#
# To edit the 'php-fpm' base Image, visit its repository on Github
#    https://github.com/Laradock/php-fpm
#
# To change its version, see the available Tags on the Docker Hub:
#    https://hub.docker.com/r/laradock/php-fpm/tags/
#
# Note: Base Image name format {image-tag}-{php-version}
#

ARG LARADOCK_PHP_VERSION=7.2

# FROM laradock/php-fpm:2.2-${LARADOCK_PHP_VERSION}
FROM letsdockerize/laradock-php-fpm:2.4-${LARADOCK_PHP_VERSION}

LABEL maintainer="Mahmoud Zalt <[e-mail]>"

ARG LARADOCK_PHP_VERSION

# Set Environment Variables
ENV DEBIAN_FRONTEND noninteractive

# always run apt update when start and after add new source list, then clean up at end.
RUN set -xe; \
    apt-get update -yqq && \
    pecl channel-update pecl.php.net && \
    apt-get install -yqq \
      apt-utils \
      #
      #--------------------------------------------------------------------------
      # Mandatory Software's Installation
      #--------------------------------------------------------------------------
      #
      # Mandatory Software's such as ("mcrypt", "pdo_mysql", "libssl-dev", ....)
      # are installed on the base image 'laradock/php-fpm' image. If you want
      # to add more Software's or remove existing one, you need to edit the
      # base image (https://github.com/Laradock/php-fpm).
      #
      # next lines are here becase there is no auto build on dockerhub see https://github.com/laradock/laradock/pull/1903#issuecomment-463142846
      libzip-dev zip unzip && \
      docker-php-ext-configure zip --with-libzip && \
      # Install the zip extension
      docker-php-ext-install zip && \
      php -m | grep -q 'zip'

#
#--------------------------------------------------------------------------
# Final Touch
#--------------------------------------------------------------------------
#

COPY ./docker/php-fpm/laravel.ini /usr/local/etc/php/conf.d
COPY ./docker/php-fpm/xlaravel.pool.conf /usr/local/etc/php-fpm.d/

USER root

# Clean up
RUN apt-get clean && \
    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* && \
    rm /var/log/lastlog /var/log/faillog

RUN usermod -u 1000 www-data

# Adding the faketime library to the preload file needs to be done last
# otherwise it will preload it for all commands that follow in this file
RUN if [ ${INSTALL_FAKETIME} = true ]; then \
    echo "/usr/lib/x86_64-linux-gnu/faketime/libfaketime.so.1" > /etc/ld.so.preload \
;fi

WORKDIR /var/www

# php.iniをコンテナに配置する
COPY ./docker/php-fpm/php7.2.ini /usr/local/etc/php/php.ini

# Laraveｌプロジェクト入れるためにgitをインストールする
#RUN apt-get install git
RUN apt-get update && apt-get install -y git

# ゴミが残っているとgitのcloneが行えないため消していおく
RUN rm -r html

# ソースコードをコンテナにコピーする
COPY . .

# .envファイルを作成する
#RUN cp .env.example .env

# Laravelを動作させるための準備をする
# composerをインストールしPHPの依存モジュールをインストールする
# 暗号化用のKeyを作成
# /storage/logs/に対してアクセス権を変更する
RUN curl -sS https://getcomposer.org/installer | php && \
    mv composer.phar /usr/local/bin/composer && \
    composer install && \
    php artisan key:generate && \
    chown -R www-data:www-data /var/www

ADD ./docker/php-fpm/startup.sh /opt/startup.sh
RUN sed -i 's/\r//g' /opt/startup.sh
CMD ["/bin/bash", "/opt/startup.sh"]

# 宣言的な意味で実際にポートを開いてる場合ではない
EXPOSE 9000

./{プロジェクト名}/docker/php-fpm/startup.sh

#!/bin/bash

# php-fpm sever lunch
php-fpm

3. ECRにリポジトリを作成する

リポジトリの作成を行う

4. Dockerをビルドし、イメージをECRへpushする

AWSCLIでログインを行う

aws configure --profile guildapp
$(aws ecr get-login --no-include-email --region ap-northeast-1 --profile guildapp )

php-fpmコンテナをpushする

docker build -t {リポジトリ名} -f docker/php-fpm/Dockerfile .
docker build -t {ECRのリポジトリURI}:latest -f docker/php-fpm/Dockerfile .
docker tag {リポジトリ名}:latest {ECRのリポジトリURI}:latest
docker push {ECRのリポジトリURI}:latest

nginxコンテナをpushする

docker build -t {リポジトリ名} -f docker/nginx/Dockerfile .
docker build -t {ECRのリポジトリURI}:latest -f docker/nginx/Dockerfile .
docker tag {リポジトリ名}:latest {ECRのリポジトリURI}:latest
docker push {ECRのリポジトリURI}:latest

5.Laravel+NuxtプロジェクトをFargateに乗せる

参考サイト

Fargateクラスターの作成

1. AWSでのECSサービスを起動する。
   クラスター＞クラスターの作成

2. クラスターテンプレートを「ネットワーキングのみ」を選択肢して「次のステップへ」

3. クラスタに名前を付け、このクラスタ用の新しいVPCの作成を有効にします。CIDRブロックとサブネットをデフォルトのままにして[作成]をクリックします。
   

4. 正常にクラスターが作成されたことを確認する
   

Application Load balancerの作成

1. EC2サービス＞ロードバランサー＞ロードバランサーの作成をクリック
2. Application Load Balancerの作成ボタンをクリック

3. 下記のように設定を行い次の手順へ進む
   
   

4. ALB用の新しいセキュリティグループを作成します
   

5. ターゲットグループに名前を付け、残りのパラメータに次のように設定します。
   

6. ターゲットタイプは、ECSタスクレベルロードバランシングのIPアドレスとして選択する必要があります。
   

7. 作成完了されたことを確認する
   

ECS Fargateタスクを作成する

ECSサービス＞タスク定義＞新しいタスク定義の作成
Fargateを選択する

タスクとコンテナの定義

※ECSTaskのIAMロールがない場合は、ロールを作成する必要がある
Amazon ECS タスク実行 IAM ロール

nginxコンテナの設定

php-fpmコンテナの設定

作成を実施する

ECS Fargateサービスを作成する

ECSサービス＞タスク定義＞FargateLaravelNuxtTestTask＞サービスの作成

サービスの設定を行う

ネットワーク構成

AutoScalingの設定

作成する

動作を確認する

作成したロードバランサーのDNSからアクセスする