NuxtをLightsailとGAEに

デプロイした話

自己紹介

自己紹介

若井豊

大阪でWebアプリや自動化ツール開発

インフラ・バックエンド・フロント担当

Nuxtアドベントカレンダー書きました

今日話すこと

今日話すこと

Nuxtアプリケーションの本サーバ展開関連

  • Lightsailやめた理由
  • GAEに移行した理由

Nuxtアプリケーション

  • API - Koa + TypeScript

  • Front - Nuxt SSR

以前の構成

サーバの初期化・保守管理が結構あった

Lightsailで不満だった点

サーバの初期設定・管理が結構大変

  • Docker環境の用意
  • Docker Swarmの用意
  • ECRの用意
  • AWS関連のクレデンシャルの用意とか
  • CIからデプロイの調整
  • ゼロダウンタイム構成組む必要あり
  • 専用データベースにIP制限設定できない
apt-get update
apt-get install -y \
    apt-transport-https \
    ca-certificates \
    curl \
    software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
apt-get update
apt-get install -y docker-ce
usermod -aG docker ubuntu

mkdir /app
mkdir /app/nginx
cat <<EOL > /app/nginx/default.conf
server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://app:3000;
        proxy_set_header Host \$host;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
    }
}
EOL

cat <<EOL > /app/docker-compose.yml
version: '3.1'
services:

  app:
    image: wakachan/nuxt-sample-project:release
    working_dir: /home/node/app
    deploy:
      replicas: 2

  nginx:
    image: nginx:1.15
    ports:
      - "80:80"
    volumes:
      - ./nginx:/etc/nginx/conf.d
    depends_on:
      - app
EOL

docker swarm init
docker stack deploy -c /app/docker-compose.yml sample

サーバ初期化コード

  build:
    docker:
      - image: circleci/python:3.6.1
    environment:
      AWS_DEFAULT_OUTPUT: json
    steps:
      - setup_remote_docker
      - run:
          name: Install awscli
          command: |
            python3 -m venv venv
            . venv/bin/activate
            pip install -r requirements.txt
      - save_cache:
          key: v1-{{ checksum "requirements.txt" }}
          paths:
            - "venv"
      - run:
          name: docker build
          command: rm -rf app/node_modules && docker build --no-cache -t app:release -f Dockerfile.
      - run:
          name: add tag to docker
          command: docker tag apprelease 387567903544.dkr.ecr.ap-northeast-1.amazonaws.com/wakai/app:release
      - run:
          name: Push image
          command: |
            . venv/bin/activate
            eval $(aws ecr get-login --region $AWS_DEFAULT_REGION --no-include-email)
            docker push 387567903544.dkr.ecr.ap-northeast-1.amazonaws.com/wakai/app:release

  deploy:
    machine: true
    steps:
      - add_ssh_keys:
          fingerprints:
            - "69:d9:3b:23:6d:65:f3:6d:8e:a7:f9:c0:2e:e1:4f:c4"
      - run:
          name: staging delpoy
          command: >
            ssh ubuntu@aaaaaa.com "sh deploy.sh"

CircleCI自動デプロイ設定

#!/usr/bin/env bash

export PATH=/home/ubuntu/bin:/home/ubuntu/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin

sudo $(aws ecr get-login --no-include-email --region ap-northeast-1)
sudo docker-compose pull sample
docker stack deploy -c docker-compose.yml --with-registry-auth project-tool

サーバ側デプロイスクリプト

アプリケーションの開発に時間が取れなくなってきた

GAEの採用

  • デプロイ設定が簡単
  • Dockerの設定必要なし
  • レジストリーの用意する必要なし
  • 必要ならDocker image使える
  • ゼロダウンタイム考慮してくれる
  • デプロイ設定がソースコードに含まれる
  • 専用DBにIP制限設定できる

変更後の構成

runtime: nodejs10
instance_class: F2
env_variables:
  HOST: '0.0.0.0'
  PORT: '8080'
  SQL_USER: user
  SQL_PASSWORD: password
  SQL_DATABASE: user
  INSTANCE_CONNECTION_NAME: app-9999:asia-northeast1:app

GAE設定

  1. app.ymlファイルを用意
  2. gcloud app deploy
  3. 完了
apt-get update
apt-get install -y \
    apt-transport-https \
    ca-certificates \
    curl \
    software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
apt-get update
apt-get install -y docker-ce
usermod -aG docker ubuntu

mkdir /app
mkdir /app/nginx
cat <<EOL > /app/nginx/default.conf
server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://app:3000;
        proxy_set_header Host \$host;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
    }
}
EOL

cat <<EOL > /app/docker-compose.yml
version: '3.1'
services:

  app:
    image: wakachan/nuxt-sample-project:release
    working_dir: /home/node/app
    deploy:
      replicas: 2

  nginx:
    image: nginx:1.15
    ports:
      - "80:80"
    volumes:
      - ./nginx:/etc/nginx/conf.d
    depends_on:
      - app
EOL

docker swarm init
docker stack deploy -c /app/docker-compose.yml sample

サーバ初期化コード

  build:
    docker:
      - image: circleci/python:3.6.1
    environment:
      AWS_DEFAULT_OUTPUT: json
    steps:
      - setup_remote_docker
      - run:
          name: Install awscli
          command: |
            python3 -m venv venv
            . venv/bin/activate
            pip install -r requirements.txt
      - save_cache:
          key: v1-{{ checksum "requirements.txt" }}
          paths:
            - "venv"
      - run:
          name: docker build
          command: rm -rf app/node_modules && docker build --no-cache -t app:release -f Dockerfile.
      - run:
          name: add tag to docker
          command: docker tag apprelease 387567903544.dkr.ecr.ap-northeast-1.amazonaws.com/wakai/app:release
      - run:
          name: Push image
          command: |
            . venv/bin/activate
            eval $(aws ecr get-login --region $AWS_DEFAULT_REGION --no-include-email)
            docker push 387567903544.dkr.ecr.ap-northeast-1.amazonaws.com/wakai/app:release

  deploy:
    machine: true
    steps:
      - add_ssh_keys:
          fingerprints:
            - "69:d9:3b:23:6d:65:f3:6d:8e:a7:f9:c0:2e:e1:4f:c4"
      - run:
          name: staging delpoy
          command: >
            ssh ubuntu@aaaaaa.com "sh deploy.sh"

CircleCI自動デプロイ設定

#!/usr/bin/env bash

export PATH=/home/ubuntu/bin:/home/ubuntu/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin

sudo $(aws ecr get-login --no-include-email --region ap-northeast-1)
sudo docker-compose pull sample
docker stack deploy -c docker-compose.yml --with-registry-auth project-tool

サーバ側デプロイスクリプト

いい感じにサーバレスになったので

アプリケーション開発に時間が増えた

しかも無料枠で動かせる

まとめ

■静的サイトやSPAでNuxtを使用

Netlify・Firebase Hosting​

 

■SSRやAPIを自動デプロイでいい感じにNuxtを使用

LightsailよりGAE

Thank you!

NuxtをLightsailとGAEに デプロイした話

By Yutaka Wakai

NuxtをLightsailとGAEに デプロイした話

  • 2,343