JAMStack作成の軌跡Part1

はじめに

• 最近業務ではAWS x サーバレスの構築が多い
• APIGW + Lambda + DynamoDBは構築するが、フロントを触ってないから練習したい...
• 過去にReact経験が少しあるが、いきなりNext.jsは厳しい...?
  • 出来るだけお金かけたくない
• JAMStackというものがあるらしいからやってみるか
  • Javascript + APIs + Markupの頭文字を組み合わせたもの
  • 参考: Jamstackって何なの？何がいいの？
  • S3の静的ホスティングで済むなら低コストじゃん！
• ※基本的には自分用の備忘録として残します

動作確認環境

• Amazon Linux2
• Node: v14.17.6
• Gatsby: v3.13.1

Node.jsの環境構築

• Node.jsをダウンロードする
• Pythonのpyenvみたいに複数バージョンの切り替えを行いたいところ
• nodenvってのがあるらしいからこれ使おう

# ※好きなバージョンを指定
NODEJS_VERSION="14.17.6"

git clone https://github.com/nodenv/nodenv.git ~/.nodenv
cd ~/.nodenv && src/configure && make -C src

cat << EOS > ~/.bashrc
export PATH="$HOME/.nodenv/bin:$PATH
eval "\$(nodenv init - --no-rehash)"
EOS

source ~/.bashrc
~/.nodenv/bin/nodenv init

mkdir -p "$(nodenv root)"/plugins
git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build
git clone https://github.com/nodenv/nodenv-update.git "$(nodenv root)"/plugins/nodenv-update
git clone https://github.com/nodenv/nodenv-package-rehash.git "$(nodenv root)"/plugins/nodenv-package-rehash
nodenv package-hooks install --all

nodenv install $NODEJS_VERSION
nodenv global $NODEJS_VERSION
eval "\$(nodenv init - --no-rehash)"

(Optional) yarnのインストール

• 今回はパッケージ管理ツールとしてyarnを用いることにした
• (過去に使ってたから)

npm install --global yarn
echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.bashrc

Gatsbyの環境構築

• Gatsbyは以下のような特徴を持つフレームワーク

  • SSG(静的サイトジェネレータ)
  • Reactをベースに開発されている
  • JAMStackを構築するのによく使われているらしい
  • Gatsby入門が非常に参考になった！Gatsby？ヘアーワックスの？って人はまず読むのをオススメする

• 環境構築は以下の通り

  • yarnを使っていたら一部つまづいたので注意
  • gatsby newでstarterを指定しない場合、gatsby-starter-defaultが指定される
  • その他のコマンドはCheatSheet参照
  • 様々なstarterが一覧で用意されている

yarn global add gatsby-cli
gatsby new gatsby-sample
cd gatsby-sample

# yarnを用いた場合、下記のエラーが発生した
# Error: Cannot find module 'gatsby-core-utils'
# package-lock.json, node_modulesを削除して再インストールしたら解決した
rm -rf package-lock.json node_modules
yarn install

生成されたファイルの確認

• src/pages/*
  • src/pages下に作られたファイルはページになる
  • src/pages/hoge.js -> [URL]/hoge/のように自動でルーティングしてくれる

• gatsby-config.js

• • メタデータやプラグインなど、一般的な設定を記述
  • サイトのタイトル、URL、説明などを記述しておいてGraphQL経由でソースコードから取得することが可能
  • Gatsby Config API

• gatsby-node.js

  • ビルド時の挙動を挙動を記述
  • 動的なページ作成の作成などが可能
  • Gatsby Node APIs
  • Recipes: Pages and Layouts

• gatsby-ssr.js

  • SSRされている静的なHTMLの内容を変更することができる
  • 今回はあんまり使ってない
  • Gatsby Server Rendering APIs

• gatsby-browser.js

  • ブラウザでの表示設定を記述
  • 共通で利用するCSSをimportしたりすることが多い
  • Gatsby Browser APIs
  • Standard Styling with Global CSS Files

やってみて出てきた疑問

作業中に出てきた疑問と軽く調べた内容は残しておく

ReactのフレームワークというとNext.jsが有名っぽいけどどう違うのか

• 以下が参考になった
  • SPA, SSR, SSGの違いについて図解でまとめてみた
  • 【JS】Next.jsとGatsby.js(SSRと静的化)の比較と選び方

gatsby-*.jsのファイルがイマイチわからん

• 以下が参考になった
  • 静的サイトジェネレーター Gatsby を使ってみた事と、縦書きテンプレートを作った話
  • Understanding the Gatsby lifecycle

.tsxファイルがあるけどTypeScriptも出来るの？

• src/pages/using-typescript.tsxがありyarn developで動作しているので出来る
• ただ初期状態だとTypeScriptの恩恵をあまり受けられないため、設定が必要
• 次回はこの件に関して備忘録を残す