🐼

Next.jsをApp RunnerでDeployする

2021/07/25に公開

AWS

App Runner

tech

はじめに

個人開発をしようと思い、技術選定をしていました。
フロントエンドはNext.jsを選択。
当初サーバーを持ちたくなかったので、サーバーレスなアプリケーションを作ろうとfirebaseを第一候補に調べていましたが、firestoreの検索クエリを使いこなせるか不安を覚えたので、別案を模索していました。
そのようなタイミングで、彗星のごとくApp Runnerが登場して、「いいじゃん！」となったので、試しに触ってみました。

参考記事

こちらの記事を大変参考にさせていただきましたmm
参考: AWS App Runner × Railsでアプリ作ってみた

事前準備

サンプルプロジェクトの作成
AWSアカウントの作成
AWS CLIのインストール
Dockerのインストール

一連の流れ

ソースコードデプロイではなく、コンテナを利用してデプロイします。
(コンテナを利用した方が何かと柔軟にできると思い、コンテナを利用しました)

サンプルプロジェクトの作成(ローカルでDockerfileを作って動作確認)
ECRにpush
App RunnerでDeploy

非常にシンプル。

サンプルプロジェクトの作成

Next.jsには、多くのテンプレートがあり、<with-typescript-eslint-jest> なるものがよさそうだったので、使用してみました。

create next appしたら、Docker化。
ディレクトリ構成は下記のようにしました。
2021/08/02追記: Dockerfileに問題があったので、変更をしています。下記記事を参照してくださいmm

├── app/
├── Dockerfile
├── Docker-compose.yml

Dockerfile

From node:14-alpine

# ワーキングディレクトリの指定
WORKDIR /usr/src/app

# linux Update, set Timezone, install bash
RUN apk --update add tzdata && \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    apk del tzdata && \
    apk add --no-cache bash

# コピー & ペースト
COPY ./app /usr/src/app

# npm update
RUN npm install -g npm

一応docker-compose.ymlも。

docker-compose.yml

version: '3.8'
services:
  web:
    container_name: web_container
    build:
      context: ./
    ports:
      - "4001:3000"
    volumes:
      - ./app:/usr/src/app
    stdin_open: true
    tty: true
    command: sh -c "npm run dev"

docker-compose upで動けば、これで準備OK

ECRにイメージpush

Amazon Container Servicesから、リポジトリを選択

プライベートを選択して、作成

作成すると、プッシュコマンドの表示を選択して、案内されるとおりに、イメージをpushします。

僕は、aws configureしていなかったため、エラーが出ました。(直近でmacのクリーンインストールをしたのを忘れていた...)
Error: Cannot perform an interactive login from a non TTY device

こちらの記事を見て、解決。
参考: AWS CLI v2をMacにインストールする

App RunnerでDeploy

いよいよApp Runnerでデプロイしていきます。
App Runner > サービスから、サービスの作成。

コンテナイメージは参照ボタンから、ECRにpushしたイメージを選択。
ECR アクセスロールに関しては、初めて作成する場合は、新しいサービスロールの作成から作成します。

サービス名
仮想 CPU とメモリ
環境変数
ポート
開始コマンド - オプション
と入力していきます。

ここで僕は、開始コマンドをnpm run build && npm startにしていたのですが、うまくDeployできませんでした。試しにpackage.jsonを下記のように加筆して、開始コマンドを
npm run execにすると、Deployが成功しました。
(これ、上手い方法知ってる方は教えていただきたいですmm)
2021/08/02追記: Dockerfileに問題があったので、変更をしています。それに伴い、package.json、開始コマンドも変更しています。下記記事を参照してくださいmm

package.json

"scripts": {
    "dev": "node server/index.js",
    "build": "next build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "exec": "npm run build && npm run start",
    // 省略
  },

次へボタンを押すと、確認画面へ進み、10分ほど待ちます。
完了したらデフォルトドメインが設定されているので、クリックしてトップページへ繊維できれば成功です。

まとめ

App RunnerはVPCレスのため、RDBを使用したい方には難しいかもしれないですが、MongoDBやDynamoDBに知見がある方で、個人開発したいケースなどで、ハマるサービスなのではないかなと思います。僕自身は、実務でMongoDBの経験があるので、今回採用してみました。次はGithub Actionsを使用して、自動デプロイ環境の構築を行っていきたいと思います。

追記

2021/08/02追記: Dockerfileに問題があったので、変更をしています。それに伴い、package.json、開始コマンドも変更しています。下記記事を参照してくださいmm