Dockerを使ってGAEにNuxt.jsをデプロイしたい

目次

1. centosにNuxt.jsの環境を構築するためのDockerFileの作成
2. Nuxt.jsを作成できるDockerの環境を立ち上げる、docker-compose.ymlを作成
3. Dockerの環境で、GAEにデプロイするためのGoogle Cloud SDK をインストール
4. gcloudの初期化と初期設定
5. Nuxtアプリを作成
6. Nuxtアプリにapp.yamlを追加してデプロイ

1. centosにNuxt.jsの環境を構築するためのDckerFileの作成

FROM centos:7.4.1708

RUN yum -y update

RUN yum -y install epel-release
RUN yum -y install http://rpms.remirepo.net/enterprise/remi-release-7.rpm

RUN yum -y upgrade
RUN yum install -y sudo
RUN yum -y install nginx

RUN curl -sL https://rpm.nodesource.com/setup_9.x | bash -
RUN yum install -y gcc-c++ make
RUN yum install -y nodejs

RUN npm install -g vue-cli
RUN npm install -g nuxt
RUN npm install -g create-nuxt-app

ENV HOST 0.0.0.0

CMD ["nginx", "-g", "daemon off;"]

WORKDIR /usr/share/nginx/html

2. Nuxt.jsを作成できるDockerの環境を立ち上げる、docker-compose.ymlを作成

version: "3"
services: 
  web:
    build: 
      context: ./
    privileged: true
    volumes:
      - "./:/usr/share/nginx/html"
    ports:
      - 80:80
      - 3000:3000
    container_name: "nuxt-platform"

DockerFileよりdocker-composeを立ち上げる

docker-compose build
docker-compose up -d
docker-compose exec web bash

3. Dockerの環境で、GAEにデプロイするためのGoogle Cloud SDK をインストール

sudo tee -a /etc/yum.repos.d/google-cloud-sdk.repo << EOM
[google-cloud-sdk]
name=Google Cloud SDK
baseurl=https://packages.cloud.google.com/yum/repos/cloud-sdk-el7-x86_64
enabled=1
gpgcheck=1
repo_gpgcheck=1
gpgkey=https://packages.cloud.google.com/yum/doc/yum-key.gpg
       https://packages.cloud.google.com/yum/doc/rpm-package-key.gpg
EOM

sudo yum install google-cloud-sdk

4. gcloudの初期化と初期設定

gcloud init

// google acountでログイン後、いくつかの質問に答える

5. Nuxtアプリを作成

create-nuxt-app sample-app
cd sample-app
npm install

6. Nuxtアプリにapp.yamlを追加してデプロイ

app.yaml

runtime: nodejs10

instance_class: F2

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'
  NODE_ENV: 'production'

Nuxt.jsのbuildとデプロイ

npm run build
gcloud app deploy

参考文献

DockerでのNuxt.js環境の構築

Nuxt.jsのGoogle App Engineへのデプロイ(公式)

• app.yamlファイルを参考
• https://ja.nuxtjs.org/faq/appengine-deployment/

CentOSへのGoogle Cloud SDKのインストールなど(公式)

• https://cloud.google.com/sdk/docs/quickstart-redhat-centos