AWS未経験者がNext.js SSRアプリをデプロイするまで

構成管理ツールを選ぶ。
Pulumiにした。選定理由は以下。

好きな言語が選べる。
Pulumi AIなるものがあるらしい。

競合はTerraformなど。

評価項目	Pulumi	Terraform
名前	かわいい	強そう
言語	TypeScript, Go, Python, YAMLなど	HCL(独自言語)
ユーザー数	少	多

人３

AWS Amplifyを使えばいいらしい。

人３

Config
環境変数とかはここに定義する

人３

DBは、最初はrailway。いけたらRDSにしてpulumiの管理下にする

人３

VPC?サブネット?後で考える。
AWSのアクセスキーはルートユーザーではなくIAMユーザーで作成して適切な権限を付与すべき。

人３

これは…

人３

デプロイ成功したが、URLにアクセスするとtoo many redirectsエラーが出てページが表示されない。baseDirectoryの設定が間違っているらしいが正しくはどうなのかわからない

index.ts

import * as pulumi from "@pulumi/pulumi";
import * as aws from "@pulumi/aws";

const config = new pulumi.Config();

// GitHub
const githubRepo = config.require("githubRepo");
const githubToken = config.require("githubToken");

// Database url
const databaseUrl = config.require("databaseUrl");

// NextAuth
const nextAuthSecret = config.require("nextAuthSecret");
const nextAuthUrl = config.require("nextAuthUrl");

// Google
const googleClientId = config.require("googleClientId");
const googleClientSecret = config.require("googleClientSecret");

const example = new aws.amplify.App("next", {
buildSpec: `  version: 0.1
  frontend:
    phases:
      preBuild:
        commands:
          - yarn install
          - yarn prisma migrate dev
      build:
        commands:
          - yarn run build
    artifacts:
      baseDirectory: .next
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*

`,
    customRules: [{
        source: "/<*>",
        status: "404",
        target: "/index.html",
    }],
    environmentVariables: {
        DATABASE_URL: databaseUrl,
        NEXTAUTH_SECRET: nextAuthSecret,
        NEXTAUTH_URL: nextAuthUrl,
        GOOGLE_CLIENT_ID: googleClientId,
        GOOGLE_CLIENT_SECRET: googleClientSecret
    },
    accessToken: githubToken,
    repository: githubRepo,
});


const main = new aws.amplify.Branch("main", {
    appId: example.id,
    branchName: "main",
});

export const url = pulumi.interpolate`https://${main.branchName}.${example.id}.amplify.com`

人３

pulumi upできなくなった。

import * as pulumi from "@pulumi/pulumi";
import * as aws from "@pulumi/aws";

この2行だけしか書いてないのに、unhandled errorが発生する。

人３

手動でAWSコンソールを操作したらデプロイできた。pulumiは情報が少なく、エラーが起こったときのトラブルシューティングが辛すぎるのでやめる。

人３

Terraform Cloudでやってみる。
VCSを選択

人３

手動とterraformの違い

Amplify app
iam_service_role_arn = サービスロールのarn
platform = "WEB_COMPUTE"

Amplify branch
framework = "Next.js - SSR"

platform = "WEB_COMPUTE"を追加して初めて動くようになった。
しかし、API系は相変わらずInternal Server Error

人３

Internal Server Errorはこれだった。

人３

一通りデプロイできるようになったので、Terraform定義をきれいにしてクローズする。

人３

main.tf

terraform {
  required_providers {
    aws = {
      source = "hashicorp/aws"
      version = "4.65.0"
    }
  }
}

provider "aws" {
  # Configuration options
  region  = "us-east-2"
}

resource "aws_amplify_app" "snsapp" {
  name       = "snsapp"
  repository = var.githubRepo
  access_token = var.githubToken
  iam_service_role_arn =  var.iamServiceRoleArn
  platform = "WEB_COMPUTE"
  
  environment_variables    = {
    DATABASE_URL = var.DATABASE_URL
    GOOGLE_CLIENT_ID = var.GOOGLE_CLIENT_ID
    GOOGLE_CLIENT_SECRET = var.GOOGLE_CLIENT_SECRET
    NEXTAUTH_URL = var.NEXTAUTH_URL
    NEXTAUTH_SECRET = var.NEXTAUTH_SECRET
  }

  enable_branch_auto_build = true
  enable_auto_branch_creation = true
  enable_branch_auto_deletion = true
  auto_branch_creation_patterns = [
    "*",
    "*/**",
  ]

  # The default build_spec added by the Amplify Console for React.
  build_spec = <<-EOT
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - env | grep -e NEXTAUTH_URL -e NEXTAUTH_SECRET -e DATABASE_URL -e GOOGLE_CLIENT_ID -e GOOGLE_CLIENT_SECRET >> .env.production
            - yarn run build
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
  EOT
  
  auto_branch_creation_config {
    enable_auto_build = true
  }

  # The default rewrites and redirects added by the Amplify Console.
  custom_rule {
    source = "/<*>"
    status = "404-200"
    target = "/index.html"
  }
}

resource "aws_amplify_branch" "main" {
  app_id      = aws_amplify_app.snsapp.id
  branch_name = "main"

  framework = "Next.js - SSR"
  stage     = "PRODUCTION"

}

人３

variables.tf

variable "githubRepo" {
  type = string
}

variable "githubToken" {
  type = string
}

variable "iamServiceRoleArn" {
    type = string
}

variable "DATABASE_URL" {
  type = string
}

variable "GOOGLE_CLIENT_ID" {
  type = string
}

variable "GOOGLE_CLIENT_SECRET" {
  type = string
}

variable "NEXTAUTH_URL" {
  type = string
}

variable "NEXTAUTH_SECRET" {
  type = string
}