AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする

2021-01-07
javascriptreactnext.jsamazon%20aws%E7%B6%99%E7%B6%9A%E7%9A%84%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3aws%20amplifynode.js
    

目次

概要

この記事では、React / Next.js アプリケーションを作成し、AWS Amplify のウェブホスティングサービスを使ってそれをデプロイする方法を説明します。

※ ここで説明するのはNext.js の SSG (静的ファイル生成) による方法です。SSRを利用した方法は別途記事を書きます。

はじめに

この記事で行っていることを説明します。

まず React / Next.js アプリケーションを作成し、それを GitHub リポジトリにプッシュします。 その後、リポジトリを AWS Amplify のウェブホスティングに接続し、amplifyapp.com ドメイン上でホストされる、CDN にデプロイします。 次に、React アプリに変更を加えることで CI の機能に触れ、main ブランチに新しい変更をプッシュして自動的にデプロイが開始するようにします。

やること

  • React アプリケーションを作成
  • Git リポジトリに追加
  • AWS Amplify でデプロイ
  • 変更を加えて再デプロイ

操作

Next.js (React) アプリの作成、Gitへのプッシュ

次のコマンドで Next.js アプリを作成します。

npx create-next-app amplify-test --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
cd amplify-test
npm run dev

http://localhost:3000/にアクセスすると「Welcome to Next.js!」を表示されると思います。

次にpackage.jsonを変更します。script の buildの箇所を修正します。 この設定は静的ファイルをoutディレクトリに吐く設定です。

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },

ここまで作成できたら GitHub にリポジトリを作成しコミットします。

git init
git remote add origin https://github.com/${user_name}/amplify-test.git
git add .
git commit -m "initial commit"
git push origin main

AWS Amplifyでプロジェクト作成

マネジメントコンソールから AWS Amplify を選択します。

aws amplify

「Host your web app」の「Get Started」を選択します。

GitHub を選択し「continue」します。そうするとGitHubの認可処理に入るので認証情報を入力します。

aws amplify

次にリポジトリのブランチを選択し「次へ」を選択します。

その次にビルド情報をyml形式で入力します。 気をつけて欲しいのは frontend->artifacts->baseDirectoryのところです。 現時点での Next.js の設定は out ディレクトリにコンテンツを吐くような仕組みにしているため、このディレクトリを参照する用に設定を変えます。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: out # ← 書き換える
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

最後に確認画面が出てくるので内容を確認したら次に進みます。

そうするとすぐにビルドが始まります。検証まで完了するとアクセスできるようになります。

aws amplify

再び変更を commit & push するとビルドが始まるのが確認できると思います。

参考にしたサイト

AWS で React アプリケーションを構築する

Next.jsの静的サイト生成(SSG)について確認

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

Amplify CLI のインストール
Amplify CLI のインストール Amplify CLI の設定 バックエンド環境作成 Amplify CLI のインストールから設定まで Amplify CLI をインストール 設定 Amplify アプリを初期化 Amplify CLI…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

最新の投稿

フェールセーフやフェールソフト・フールプルーフ 障害対策用語のまとめ

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

Gitにプロキシを設定する
プロキシを設定する 確認 Gitでプロキシを通しておくメモです。 プロキシを設定する 以下のコマンドでproxyを通します。 ※ がプロキシのURL…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

Homebrew で php7.4 + Xdebug をインストール
php7.4のインストール Xdebugのインストール php.ini に追記 参考にさせていただいたサイト phpunitのカバレッジを算出を行うためにMacにHomebrewでphp7.4をインストールしようとした際の記録です。 php7.…

CentOS で スマートにプロキシを設定する
コマンドライン上で通す よりスマートに設定する 設定ファイルに記述 CentOSでプロキシを通す設定のメモです。 プロキシ環境で yum/dnf でリポジトリを更新する場合や、curl/wget…

MySQL8.0 で利用できるパラメータを表示する方法
オプションの表示 mysql8.0でmy.cnfなどで利用できるパラメータ一覧を出す方法。 オプションの表示 オプションの表示は次のコマンドで実施できます mysqld — The MySQL Server 【MySQLパラメーター比較資料】MySQL 5.…

CentOS に MySQL8.0をインストールする
はじめに 環境 起動 MySQLインストール my.cnf の設定 プロセス立ち上げ エラー The designated data directory /var/lib/mysql/ is unusable. You can remove all files…

Tags

Dates

© 2021   404 motivation not found