AWS Amplifyを使用しGatsby.jsで構築されたサイトをデプロイする

スポンサーリンク

GatsbyCLIのインストール/プロジェクト作成/ローカルWebサーバーで公開しましたので、AWS Amplifyでサイトをデプロイしてみます。

■PC環境

・Windows10、Administrator(管理者)アカウント

・Gatsby.js の CLI をインストール

・node version 14.15.0

・npm version 6.14.8

・git version 2.29.2.windows.1

■AWS Amplifyでデプロイ

AWS Amplifyでデプロイする前に、GitHubにログインし、空のリポジトリを作成しておきます。

C:\Users\Administrator>cd blog

C:\Users\Administrator\blog>git remote add origin https://github.com/○○/○○.git

C:\Users\Administrator\blog>git push -u origin master

cdコマンドで作成したプロジェクトに移動し、gitのコマンドを入力し、Enterキーを押します。

Enterキーを押すと、「Connect toGitHub」ウインドウが表示されます。「Sign in with your browser」をクリックします。

クリックすると、Webブラウザが起動し、Githubの「Authorize application」ウインドウが表示されます。「Authorize Git Credential Manager(Gitクレデンシャルマネージャーを承認する)」と書かれていますので、「Authorize Git Credential Manager(Gitクレデンシャルマネージャーを承認する)」ボタンをクリックします。

クリックすると、「Confirm password」ウインドウが表示されます。「Confirm password to continue(続行するにはパスワードを確認してください)」と書かれていますので、パスワードを入力し、「Confirm password(パスワードを認証する)」ボタンをクリックします。

クリックすると、「Authentication Succeeded(認証に成功しました)」と表示されます。Webブラウザを閉じます。

info: please complete authentication in your browser…
Enumerating objects: 28, done.
Counting objects: 100% (28/28), done.
Delta compression using up to 4 threads
Compressing objects: 100% (26/26), done.
Writing objects: 100% (28/28), 389.37 KiB | 9.73 MiB/s, done.
Total 28 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), done.
To https://github.com/○○/○○.git
* [new branch] master -> master
Branch ‘master’ set up to track remote branch ‘master’ from ‘origin’.

これでPush が完了となります。

■Amplify Console にアクセスする

完了後、Amplify Console(https://aws.amazon.com/jp/amplify/console/)にアクセスします。

アクセスすると、「アプリケーションの接続」ボタンがあるので、クリックします。

クリックすると、ログイン画面になるので、ルートユーザーでログインします。

ログインすると、「Get started with the Amplify Console(Amplifyコンソールの使用を開始する)」とページに表示されます。リポジトリのサービスプロバイダーで「Github」を選択します。

選択後、「Continue」ボタンをクリックします。

クリックすると、Githubの「Authorize AWS Amplify (ap-northeast-1)(AWS Amplifyを承認する(ap-northeast-1))」とページに表示されます。「Authorize aws-amplify-console(aws-amplify-consoleを承認)」ボタンをクリックします。

クリックすると、「Confirm password」ウインドウが表示されます。「Confirm password to continue(続行するにはパスワードを確認してください)」と書かれていますので、パスワードを入力し、「Confirm password(パスワードを認証する)」ボタンをクリックします。

クリックすると、AWS Amplify Consoleの「リポジトリブランチの追加」と表示されたページが現れます。「GitHub 認証が成功しました。」と書かれていますので、先程の承認は完了となります。

完了後、「リポジトリの選択」でGitHubにログインし、作成しておいた空のリポジトリを選択します。ブランチは「master」で選択します。選択後、「次へ」ボタンをクリックします。

クリックすると、「アプリの名前」の入力欄にアプリの名前を入力します。入力後、ビルドの設定の項目がありますが、編集はしないので、「次へ」ボタンをクリックします。

クリックすると「確認」画面が表示されます。「リポジトリの詳細」と「アプリの設定」を確認し、「保存してデプロイ」ボタンをクリックします。

クリックすると、デプロイが行われます。画面上でデプロイの進行状況が確認できます。デプロイの完了まではしばらく時間がかかります。

デプロイが成功すると、進行状況が全て緑色になり、過程の全てにチェックが入ります。

デプロイが成功し、サイトが公開されているかを確認する場合は、「master」「 Continuous deploys set up」と表示されている下にURLが記載されているので、こちらをクリックします。

クリックすると、Webブラウザ上にサイトが表示されます。

コメント

タイトルとURLをコピーしました