■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ブラウザ上にサイトが表示されます。

■PC環境

・Windows10、Administrator（管理者）アカウント

・node version 14.15.0

・npm version 6.14.8

■Windows PowerShellを起動する

Windows10のデスクトップ画面に、「ここに入力して検索」と表示されている検索ボックスで「powershell.exe」と検索します。検索すると、powershell.exeが表示されますので、こちらをクリックします。クリックすると、Windows PowerShellのウインドウが表示されます。

■GatsbyCLIをインストール

npm install -g gatsby-cli

表示後、上記のコマンドを入力し、Enterキーを押します。

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported

> windows-build-tools@5.2.2 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\windows-build-tools
> node ./dist/index.js

 

Downloading python-2.7.15.amd64.msi
[============================================>] 100.0% of 20.25 MB (3.24 MB/s)
Downloaded python-2.7.15.amd64.msi. Saved to C:\Users\Administrator\.windows-build-tools\python-2.7.15.amd64.msi.
Downloading vs_BuildTools.exe
[============================================>] 100.0% of 1.12 MB (1.12 MB/s)
Downloaded vs_BuildTools.exe. Saved to C:\Users\Administrator\.windows-build-tools\vs_BuildTools.exe.

Starting installation…
Launched installers, now waiting for them to finish.
This will likely take some time – please be patient!

Status from the installers:
———- Visual Studio Build Tools ———-
Successfully installed Visual Studio Build Tools.
——————- Python ——————–
Still waiting for installer log file…

Now configuring the Visual Studio Build Tools and Python…

All done!

+ windows-build-tools@5.2.2
added 147 packages from 102 contributors in 40.989s
PS C:\Users\Administrator> npm install -g gatsby-cli
npm WARN deprecated @hapi/joi@15.1.1: Switch to ‘npm install joi’
npm WARN deprecated @hapi/address@2.1.4: Moved to ‘npm install @sideway/address’
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
C:\Users\Administrator\AppData\Roaming\npm\gatsby -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\cli.js

> core-js@2.6.11 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> gatsby-telemetry@1.3.39 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\gatsby-telemetry
> node src/postinstall.js || true

> gatsby-cli@2.12.115 postinstall C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli
> node scripts/postinstall.js

╔════════════════════════════════════════════════════════════════════════╗
║ ║
║ Gatsby collects anonymous usage analytics ║
║ to help improve Gatsby for all users. ║
║ ║
║ If you’d like to opt-out, you can use `gatsby telemetry –disable` ║
║ To learn more, checkout https://gatsby.dev/telemetry ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝
Success!

Welcome to the Gatsby CLI! Please visit https://www.gatsbyjs.org/docs/gatsby-cli/ for more information.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\gatsby-cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

+ gatsby-cli@2.12.115
added 596 packages from 528 contributors in 61.711s

Enterキーを押すと、インストールが開始されます。開始後、しばらくするとインストールが完了となります。

■GatsbyJSのプロジェクトを作成する

完了後、GatsbyJSのプロジェクトを作成します。Windows PowerShellでプロジェクトを作成すると、エラーが表示されてしまったので、Windowsの「コマンドプロンプト」を起動します。

C:\Users\Administrator>gatsby new blog

起動後、上記のコマンドを入力し、Enterキーを押します。

info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git
Cloning into ‘blog’…
remote: Enumerating objects: 29, done.
remote: Counting objects: 100% (29/29), done.
remote: Compressing objects: 100% (27/27), done.
remote: Total 29 (delta 2), reused 13 (delta 0), pack-reused 0
Receiving objects: 100% (29/29), 613.73 KiB | 831.00 KiB/s, done.
Resolving deltas: 100% (2/2), done.
success Created starter directory layout
info Installing packages…
info Preferred package manager set to “npm”

> bufferutil@4.0.1 install C:\Users\Administrator\blog\node_modules\bufferutil
> node-gyp-build

> utf-8-validate@5.0.2 install C:\Users\Administrator\blog\node_modules\utf-8-validate
> node-gyp-build

> sharp@0.25.4 install C:\Users\Administrator\blog\node_modules\sharp
> (node install/libvips && node install/dll-copy && prebuild-install –runtime=napi) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-win32-x64.tar.gz
info sharp Creating C:\Users\Administrator\blog\node_modules\sharp\build\Release
info sharp Copying DLLs from C:\Users\Administrator\blog\node_modules\sharp\vendor\lib to C:\Users\Administrator\blog\node_modules\sharp\build\Release

> core-js@2.6.11 postinstall C:\Users\Administrator\blog\node_modules\babel-runtime\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@3.6.5 postinstall C:\Users\Administrator\blog\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”

> core-js-pure@3.6.5 postinstall C:\Users\Administrator\blog\node_modules\core-js-pure
> node -e “try{require(‘./postinstall’)}catch(e){}”

> gatsby-telemetry@1.3.38 postinstall C:\Users\Administrator\blog\node_modules\gatsby-telemetry
> node src/postinstall.js || true

> mozjpeg@7.0.0 postinstall C:\Users\Administrator\blog\node_modules\mozjpeg
> node lib/install.js

√ mozjpeg pre-build test passed successfully

> pngquant-bin@6.0.0 postinstall C:\Users\Administrator\blog\node_modules\pngquant-bin
> node lib/install.js

√ pngquant pre-build test passed successfully

> gatsby-cli@2.12.113 postinstall C:\Users\Administrator\blog\node_modules\gatsby\node_modules\gatsby-cli
> node scripts/postinstall.js

> gatsby@2.24.91 postinstall C:\Users\Administrator\blog\node_modules\gatsby
> node scripts/postinstall.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

added 2229 packages from 1268 contributors and audited 2236 packages in 103.392s

141 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

info Initialising git in blog
Initialized empty Git repository in C:/Users/Administrator/blog/.git/
info Create initial git commit in blog
info
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

cd blog
gatsby develop

Enterキーを押すと、新しいプロジェクトが作成されます。「Your new Gatsby site has been successfully bootstrapped.（新しいGatsbyサイトは正常にブートストラップされました。）」と表示されますので、これが表示されれば、プロジェクトの作成は完了です。

■作成したプロジェクトをローカルWebサーバーで公開する

cd blog
gatsby develop

完了後、上記のコマンドを入力し、Enterキーを押します。

success open and validate gatsby-configs – 0.047s
success load plugins – 3.370s
success onPreInit – 0.046s
success initialize cache – 0.011s
success copy gatsby files – 0.251s
success onPreBootstrap – 0.050s
success createSchemaCustomization – 0.005s
success Checking for changed pages – 0.001s
success source and transform nodes – 0.101s
success building schema – 0.404s
info Total nodes: 33, SitePage nodes: 1 (use –verbose for breakdown)
success createPages – 0.002s
success Checking for changed pages – 0.001s
success createPagesStatefully – 0.136s
success update schema – 0.033s
success write out redirect data – 0.002s
success Build manifest and related icons – 0.144s
success onPostBootstrap – 0.148s
info bootstrap finished – 14.665s
success onPreExtractQueries – 0.001s
success extract queries from components – 0.509s
success write out requires – 0.033s
success run static queries – 0.286s – 3/3 10.49/s
success run page queries – 0.074s – 6/6 81.00/s
success Generating image thumbnails – 5.850s – 6/6 1.03/s
⠀
You can now view gatsby-starter-default in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site’s data and schema
⠀
http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle – 14.390s

Enterキーを押すと、上記のメッセージが表示されます。「You can now view gatsby-starter-default in the browser.（これで、ブラウザでgatsby-starter-defaultを表示できます。）」と表示されますので、「http://localhost:8000/」のURLをコピーし、Webブラウザを起動させます。

起動後、WebブラウザのアドレスバーにURLをコピーし、アクセスします。

アクセスすると、サイトに「Gatsby Default Starter」、「Welcome to your new Gatsby site.」等の表示が出ます。これでローカルWebサーバーでの公開がされました。