JAMStack作成の軌跡Part1

# JAMStack作成の軌跡Part1

## はじめに

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

### 動作確認環境

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

## Node.jsの環境構築

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

```shell
# ※好きなバージョンを指定
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を用いることにした
- (過去に使ってたから)

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



## Gatsbyの環境構築

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

  - SSG(静的サイトジェネレータ)
  - Reactをベースに開発されている
  - JAMStackを構築するのによく使われているらしい

  - [Gatsby入門](https://zenn.dev/tomokiya/books/4b13342f6d878b93e06c)が非常に参考になった！Gatsby？ヘアーワックスの？って人はまず読むのをオススメする

- 環境構築は以下の通り

  - yarnを使っていたら一部つまづいたので注意
  - `gatsby new`でstarterを指定しない場合、[gatsby-starter-default](https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-default/)が指定される
    - その他のコマンドは[CheatSheet](https://www.gatsbyjs.com/docs/cheat-sheet/)参照
    - 様々なstarterが[一覧](https://www.gatsbyjs.com/starters)で用意されている

```shell
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](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/)
- gatsby-node.js
  - ビルド時の挙動を挙動を記述
  - 動的なページ作成の作成などが可能
  - [Gatsby Node APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/)
  - [Recipes: Pages and Layouts](https://www.gatsbyjs.com/docs/recipes/pages-layouts/)
- gatsby-ssr.js
  - SSRされている静的なHTMLの内容を変更することができる
  - 今回はあんまり使ってない
  - [Gatsby Server Rendering APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/)
- gatsby-browser.js
  - ブラウザでの表示設定を記述
  - 共通で利用するCSSを`import`したりすることが多い
  - [Gatsby Browser APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/)
  - [Standard Styling with Global CSS Files](https://www.gatsbyjs.com/docs/how-to/styling/global-css/)

## やってみて出てきた疑問

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

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

- 以下が参考になった
  - [SPA, SSR, SSGの違いについて図解でまとめてみた](https://shimablogs.com/spa-ssr-ssg-difference)
  - [【JS】Next.jsとGatsby.js(SSRと静的化)の比較と選び方](https://jsnotice.com/posts/2020-05-15/)

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

- 以下が参考になった
  - [静的サイトジェネレーター Gatsby を使ってみた事と、縦書きテンプレートを作った話](https://qiita.com/kikuchi_kentaro/items/985b182a78c3553981ee#-lifecycle)
  - [Understanding the Gatsby lifecycle](https://medium.com/narative/understanding-gatsbys-lifecycle-31c473ba2f2d)

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

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