export const meta = {
  title: "ブログの開発（Next.js, MDX, Chakra, AWS）",
  createdAt: '2022-07-18',
  category: 'IT',
  tags: ['frontend', 'react', 'aws', 'next.js', 'chakra-ui'],
};

# ブログの開発（Next.js, MDX, Chakra, AWS）

自分はエンジニアではある。しかし、最近あまりコードが書けていない。
（厳密には、コードは書いているのだが主戦場のソレではないというか、Lua とか書いていたりする）

ブログの開発であれば、フロントエンドエンジニアである自分にはマッチしてそうだし、開発が止まっても誰にも迷惑をかけないし気楽にできそう。

[TOPへ](/)
[Yahooへ](https://www.yahoo.co.jp)


## 要件

最初に考えるべきはやっぱり要件かなと思う。
ブログの開発なんてしたことはないので想像することしかできないが、こんな使い勝手だといいな。というのを下記にまとめてみた。

- 記事は MDX ファイルを普通に保存していく
- （少なくとも最初は）静的ファイル生成で身軽にしておく
- （将来的には）広告を貼ったり、お金に繋がるといい
- ワンコマンドでデプロイしたい

まあ、それっぽくはなったかなと思う。サーバサイドはこれからもっとお勉強が必要そうだ。
せっかくブログをはじめたのだし、そういうのをどんどん残していきたい。



## 採用スタック

### Next.js

今となっては普通すぎる選択。特記事項なし。

ちなみに、自分は Vue やら Angular やらは触ったことがないので候補にすら入っていない。（Svelte は興味があるのでちらっと頭をよぎった）


### Chakra

UI ライブラリとしては Chakra を選択した。

最初は Mantine というライブラリを使っていたが、だんだんとテーマのカスタマイズ性能に不満を持つようになった。
特にブログ実装だと MDX のスタイリングをするのにそこそこ独自のカスタマイズが必要になるように思う。

他のライブラリを探すにあたって候補は MUI と Chakra だったが、結果的には Chakra を採用することにした。
Chakra は思想が一貫していて賛成できるし、コンポーネントの品質が高いように思う。


### AWS

デプロイ先は AWS CloudFront にすることとした。

正直、あんまり他の静的サイトホスティングサービスに詳しくないのでなんともいえない。
会社の知り合いが Firebase Hosting を推していたりするし、見た感じ便利そうなのでいいなあと思いつつ
AWS で構築してしまったのでこれでいく。別に不満もない。


## ハマったこと

### 素の CloudFront では /index.html を省略してアクセスできない

まじかよ？って思ったが、そういうものらしい。
解決するには、自分でパスを書き換える CloudFront Functions を書かなければならないらしい。（ちょっと前まで Lambda@Edge でやってた模様）
[こちら](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/example-function-add-index.html)をご参照ください。


### なぜか CloudFront -> S3 のつなぎこみで 403 がでてしまってうまくいかない

とりあえず、いろんな作業をしてしまったので、必要だったことをすべて列挙することとする。
前提として、当たり前に HTTPS アクセスのみの状態を作ろうとしている。


#### ドメイン名を払い出す

この作業は SSL 証明書の発行のためにも、ブログの公開のためにも必要となる。
単純に Route53 でドメインを登録するだけでいい。

※ 安いけど、有料です。


#### AWS Certificate Manager で SSL 証明書の発行

先程作ったドメイン名を利用して DNS 検証で SSL 証明書を払い出す。
別の方法としてメールを利用した SSL 証明書の払い出しも可能だが、ドメイン名のほうが楽だと思う。


#### S3 にブログをアップロードする

S3 にブログをアップロードするが、S3 バケット情報や AWS アカウント情報などの秘匿情報は環境変数化しておきたいし、 実行は npm scripts から行いたいため。
今回はそれを実現するために `dotenv-run-script` というツールを利用することにした。

```json
{
  "scripts": {
    "deploy": "npm run deploy:s3 && npm run deploy:cf",
    "deploy:s3": "dotenv-run-script .env.local -- deploy:s3:main",
    "deploy:s3:main": "aws s3 sync --region ap-northeast-1 --delete ./out s3://${AWS_S3_BUCKET}",
    "deploy:cf": "dotenv-run-script .env.local -- deploy:cf:main",
    "deploy:cf:main": "aws cloudfront create-invalidation --region ap-northeast-1 --distribution-id ${AWS_CLOUD_FRONT_ID} --paths '/*'"
  }
}
```


#### CloudFront ディストリを作成する

当然、オリジンに S3 バケットを指定する。
また、SSL 証明書も払い出されているので代替ドメイン名に、作成したドメイン名を指定して SSL 証明書を設定する。

※ 代替ドメイン名は CNAME レコードらしい、ALIAS レコードのほうが料金的にいいはずなんだけど、どうやるんだろ？ここでは関係ないのかな？




export const meta = {
  title: "HTMLプレビュー",
  createdAt: '2022-07-18',
  category: 'other',
  tags: [],
};

# H1

paragraph

paragraph

## H2

paragraph

paragraph

### H3

paragraph

paragraph

#### H4

paragraph

paragraph

##### H5

paragraph

paragraph

###### H6

paragraph

paragraph


```tsx

type A = {
  B: [
    1,
   '1',
   true,
   false,
   null,
   undefined,
  ];
};

```
