🗂

ServerlessでAWSにNext.jsアプリを(CIで)デプロイするTIPS

2020/11/06に公開

Next.js

Serverless

tech

※こういう記事は普通書かないんですが、ちょっとserverless-next.jsの出来がいまいちなためにハマりどころがあるので書くに至りました。

書いてから気づいたけどAWSかどうかはあまり関係ない。

やりかた

詳しいやりかたは記載しませんが、間違ったリソースをみると失敗するので注意が必要です。

下記のドキュメントではうまくいきません

正しい方法は、githubのREADMEにある#Getting startedの項目にあります

常に最新化しておくこと

serverless-next.jsを使う上でとても重要なのは、常に新しいバージョンに追従することです。

https://github.com/serverless-nextjs/serverless-next.js/releases から@sls-next/serverless-componentの最新のstable releaseを探して記入します。

# serverless.yml

myNextApplication:
  component: "@sls-next/serverless-component@{version_here}" # it is recommended you pin the latest stable version of serverless-next.js

recommendedなどと書いてありますが、文字通り常に最新じゃないと動かない事が多いです。serverlessのサービス内で後方互換をあまりチェックせずにアップデートしているためか、例えばCIを作成したときから数ヶ月後には動かなくなっているみたいなことがざらにあります

例えば、2020/11/06現在、9月ごろには動いていたserverless-component@1.15.1では動かず、下記のような調べても全くみつからないエラーが出ます。（自分はgithub actionsを使って1年半くらい運用していますが、こういうことが２度ありました）

TypeError: s3_static_assets_1.default is not a function

gihub actionsで動かすサンプル

環境ごとに変えたいものを変えてリリースするサンプルです。

# serverless.yml
myApp:
  component: '@sls-next/serverless-component@1.18.0'　// <- 必ず最新に！
  inputs:
    bucketName: ${env.bucket}
    domain:
      - ${env.subdomain}
      - ${env.domain}

こんな感じで環境ごとに分けたければ、下記のようなファイルを作ってあげて、

// env-development

domain='dev.sample.com'
subdomain='app'
bucket='yourbucketname'

package.jsonのscriptで--stageオプションで指定してあげます。

// package.json
"deploy:dev": "serverless --stage=development",

github actionsのworkflowはこんな感じで、developにマージしたらリリースします

name: frontend deploy dev

on:
  push:
    branches: 
      - develop

env:
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  AWS_DEFAULT_REGION: ap-northeast-1

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install -g yarn
    - name: yarn install, lint
      working-directory: ./frontend
      run: |
        yarn
        yarn build
        yarn deploy:dev
      env:
        CI: true

動かない？

動かないときは大抵の場合@sls-next/serverless-componentのバージョンが変更され、breaking changeによってエラーになることが多いです。ググっても何も出てこないエラーがあった場合は、まず最新バージョンかどうか調べましょう。

やりかた

常に最新化しておくこと

gihub actionsで動かすサンプル

動かない？

Discussion