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%20amplify
    

目次

概要

この記事では、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

関連記事

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用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

最新の投稿

UNIXドメインソケット通信 vs INETドメインソケット通信 php-fpmで動作させる場合の違いについて
結論 ソケット通信について ソケットについて ソケット通信の種類 UNIXドメインソケット通信を行う場合のメリット 参考にしたサイト php-fpm の設定方法で調べた際にIPとポートで設定するパターンとUNIX…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

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…

PHP-Parser で PHP5からPHP7で動くコードに自動修正するツールが作る夢をみた
ツールが備える機能条件 PHP-Parser について PHP-Parser の簡単なサンプル ASTオブジェクトの置換・変更 PHP5からPHP7への変更内容を実装する ex1 includeパスを変更する ex2 例外クラスを Exception…

PHP5からPHP7への移行ツールを作るための解析・自動修正ツールを調べる
PHP5からPHP7への下位互換のない機能 使えそうなツールの洗い出し PHPStan phan php7cc php7mar php-to-7-aid Rector php-ast PHP-Parser まとめ 追記 (2021/01/0…

CentOS8にDNFでPerl5.30のインストール
Modularityについて Perl5.30インストール dnf module でハマったところ その他 Perl5.26の場合 Perl5.24の場合 CentOS8 or CentOS Streamに Perl5.30をDNF…

homebrew-core is a shallow clone. 対処法
homebrew で homebrew-core is a shallow clone.と 表示されたエラー 対処法 homebrew で homebrew-core is a shallow clone.と homebrewでupdate…

centos-streamのDockerコンテナイメージを作成した
背景 centos-stream コンテナのビルド & インストール 参考にしたところ centos-streamのDockerコンテナイメージを作成しました。 背景 CentOS8からCentOS Stream…

CentOS8でEPELとPowerToolsリポジトリの有効化
EPELとPowerToolsについて EPEL PowerTools EPELとPowerToolsの有効化 Powertoolsの有効化 epel-releaseのインストール 参考にしたサイト CentOS8でEPELとPowerTools…

Tags

Dates

© 2021   404 motivation not found