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の環境構築
# ※好きなバージョンを指定
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が有名っぽいけどどう違うのか
gatsby-*.jsのファイルがイマイチわからん
.tsxファイルがあるけどTypeScriptも出来るの？
- src/pages/using-typescript.tsxがあり
yarn developで動作しているので出来る - ただ初期状態だとTypeScriptの恩恵をあまり受けられないため、設定が必要
- 次回はこの件に関して備忘録を残す