Docker で AngularアプリをビルドしてAWS S3へデプロイする

#Docker#AWS#angular-cli
Posted on 2019/03/27 00:00:00(+9:00)

やりたい事

  1. git repo からソースを clone する（複数の repo を clone する必要がある)
  2. それは Angular のアプリなので、 ng --prod build する
  3. ビルドされたアプリのファイル群を aws cli を使って S3 にアップロードする

Dockerfile

AWS CLIをDocker環境で実行する で紹介されていた Dockerfile に、 node と Angular をインストールするスクリプトを追加したものです。

FROM python:3.6

ARG pip_installer="https://bootstrap.pypa.io/get-pip.py"
ARG awscli_version="1.16.76"

# Install awscli
RUN pip install awscli==${awscli_version}

# Install sam
RUN pip install --user --upgrade aws-sam-cli
RUN mkdir /data
RUN chmod -x /data

# Install nodejs
RUN apt-get update 
RUN apt-get install curl software-properties-common -y
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install nodejs

# Install angular
RUN npm install -g @angular/cli@7.3.6

ENV PATH $PATH:/root/.local/bin

実行スクリプト

次に Docker 内で実行するスクリプトです。 ファイル名は Deploy.sh としておきます。

#!/bin/sh

# Setup git user/password
echo -e "machine $GIT_DOMAIN\nlogin $GIT_USER\npassword $GIT_PW" > ~/.netrc

# Create work directory
mkdir work
cd work

# Clone projects
git clone -b $GIT_BRANCH https://xxxx/my-awesome-lib.git
git clone -b $GIT_BRANCH https://xxxx/my-awesome-app.git

# Restore node_modules
cd my-awesome-lib
npm ci
cd ..

# Build angular prod
cd my-awesome-app
npm ci
ng --base-href=./ --prod build

# Deploy to S3
aws s3 sync ./dist/my-awesome-app/ s3://my-awesome-bucket/www --acl public-read

冒頭で言ったように、複数のリポジトリから Clone する必要があるプロジェクトです。 また Private なので user/password が必要ですが、どうせ docker コンテナは使い捨てだし .netrc でいっか、と思ってますがどうなんでしょう？

clone した後、それぞれのディレクトリに移動して npm ci をして node_modules を復元します。

その後、Angular アプリをビルド (ng --prod build)します。

最後に、 s3 sync で AWS S3 の指定バケットにアップロードしています。--acl public-read は、誰でも閲覧できるサイトにするために付けています。

必要な環境変数

Dockerコンテナ内で、次の環境変数が必要です。

  • Git アクセス
    • GIT_DOMAIN - git リポジトリのドメイン
    • GIT_USER - git ユーザー
    • GIT_PW - ↑のパスワード
    • GIT_BRANCH - 取得する branch 名
  • AWS S3 アクセス
    • AWS_ACCESS_KEY_ID - S3 への書込権限を持った IAMユーザーのアクセスキー
    • AWS_SECRET_ACCESS_KEY - ↑のシークレットキー
    • AWS_DEFAULT_REGION - リージョン（S3 だから要らないかも）

これらの値は、後述の docker run する時に渡します。

Docker イメージのビルドとコンテナの実行

Docker イメージのビルド

Dockerfile のあるディレクトリで、以下のコマンドを実行します。

docker build -t aws-angular .

docker images で aws-angular が作成されていれば成功です。

コンテナ実行スクリプト

実行スクリプトファイル Deploy.sh があるディレクトリで、以下のコマンドを実行します。 環境変数に入れる値はそれぞれ準備してください。

docker run -it \
 -e AWS_ACCESS_KEY_ID=xxxx \
 -e AWS_SECRET_ACCESS_KEY=xxxxxxx \
 -e AWS_DEFAULT_REGION=ap-northeast-1 \
 -e GIT_DOMAIN=your.repo.com \
 -e GIT_USER=your_user_id \
 -e GIT_PW=your_password \
 -e GIT_BRANCH=master \
 -v $(pwd):/data \
 aws-angular sh /data/deploy.sh

これを実行すると、

  1. git repo からソースを clone する（複数の repo を clone する必要がある)
  2. それは Angular のアプリなので、 ng --prod build する
  3. ビルドされたアプリのファイル群を aws cli を使って S3 にアップロードする

が順次実行されます。

参考