Go to Qiita Advent Calendar 2024 Top
LoginSignup
25
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@gemetasu1103(モリ ハジメ)

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

Last updated at Posted at 2019-03-24

前提

同一リポジトリで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 <mahmoud@zalt.me>"

# 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 <mahmoud@zalt.me>"

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にリポジトリを作成する

リポジトリの作成を行う

image.png

image.png

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ブロックとサブネットをデフォルトのままにして[作成]をクリックします。
    image.png

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

Application Load balancerの作成

  1. EC2サービス＞ロードバランサー＞ロードバランサーの作成をクリック

  2. Application Load Balancerの作成ボタンをクリック

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

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

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

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

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

ECS Fargateタスクを作成する

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

image.png

タスクとコンテナの定義

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

image.png
image.png

nginxコンテナの設定

image.png

php-fpmコンテナの設定

image.png

作成を実施する

image.png

ECS Fargateサービスを作成する

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

image.png

サービスの設定を行う
image.png
image.png

ネットワーク構成
image.png
image.png
image.png
image.png

AutoScalingの設定
image.png
image.png

作成する
image.png
image.png

動作を確認する

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

image.png

25
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
25
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?