Gatsby(TypeScript)×Netlify×Dockerの始め方

収益が出ていないのに、今月もブログのサーバー代を払う僕へ、朗報です。
**Gatsby×Netlify**を使って**無料**で**世界中にブログを届ける方法がございます！！**

今回はDockerを使いつつ、ブログが配信できるまでの方法をご紹介致します:muscle:


## まずは全体の流れをサラッと確認

1. Gatsbyを起動させるためにDocker環境を構築していく
2. Gatsby(TypeScript)でサイトを構築
3. NetlifyをGitHubと連携させて記事を自動でデプロイ

上記の流れで本記事ではご紹介していきます(・∀・)
[完成後のサンプルリポジトリはコチラ](https://github.com/Hirochon/gatsby-ts-netlify-docker)


## 開発環境

- Docker: 20.10.1
- docker-compose: 1.27.4
- Node: 12.17.0
- Gatsby: 2.10.0


## ファイル構造の確認

普段Qiitaの記事を見ていて、いつも『ファイル構造知りたいなぁー』とか思っているので(笑)、
完成後のファイル構造を載せておきます。

```
gatsby-ts-netlify-docker
    |- gatsby
        |- ...
    |- docker-compose.yml
    |- Dockerfile
    |- README.md
```

## Dockerによる環境構築

Dockerはローカルでのnodeの実行環境として使っていきます！

### Dockerfile
先ほどご紹介した場所に`Dockerfile`を配置し、以下の記述をしていきましょう！

```dockerfile:Dockerfile
FROM node:12.17.0

RUN mkdir gatsby-ts-netlify-docker
WORKDIR /gatsby-ts-netlify-docker

RUN yarn global add gatsby-cli
```

`FROM`ではイメージの取得、`RUN`で`gatsby-ts-netlify-docker`フォルダの作成、`WORKDIR`で作業ディレクトリの設定をしています。
最後に今回の肝である`gatsby-cli`をglobalにaddしております。

### docker-compose.yml

書けたら次に`docker-compose.yml`を紹介した場所に作成して、以下の記述をしていきましょう！

```yaml:docker-compose.yml
version: '3.8'
services:
  gatsby:
    build: ./
    tty: true
    stdin_open: true
    volumes:
      - ./:/gatsby-ts-netlify-docker
    environment:
      - NODE_ENV=development
    ports:
      - 8000:8000
```

`build`で`Dockerfile`の場所を教える。`tty`、`stdin_open`でコンテナとホストをつなぐ設定をして、`volumes`でhostとコンテナのディレクトリを対応させて、`ports`ではローカルでサーバーをたてる際のポートを設定しています。

### ビルド&立ち上げ

`Dockerfile`と`docker-compose.yml`ファイルが配置できれば、ビルド後、コンテナを立ち上げていきましょう！

```bash
$ docker-compose build
$ docker-compose up -d
```

これでコンテナがビルドされ、立ち上がりました！

## Gatsbyを使ってサイトを構築する

今回はTypeScript対応のStarter Libraryを使ってサイトを構築していきます。

### Dockerのコンテナ内に入る

まずはコマンドを実行するためにコンテナ内に入りましょう:open_hands:

```bash
$ docker-compose exec gatsby bash
```

これでコンテナ内に入れたと思います！

### Starter Libraryの導入

今回僕が導入しようと決めていたLibraryは以下の特徴をもっているものです。

- TypeScriptで書かれている
- 最低限の構成

よって、選ばれたのは、、、

**gatsby-starter-typescript-plus**でした！
[リンクはコチラから](https://www.gatsbyjs.com/starters/resir014/gatsby-starter-typescript-plus/)

コチラを導入していきます。

```bash
gatsby new gatsby https://github.com/resir014/gatsby-starter-typescript-plus
```

『時間かかるな−』と思った方、通常仕様なので、安心してお待ちください〜(*´∀｀*)

下記のような表示が出てきたら成功です！！
![Screenshot from 2020-12-27 03-13-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436088/50891628-6bc9-8300-0ba0-e57c20336070.png)

### いよいよ表示させていく！
画像にもあるとおり、`gatsby develop`でサーバーを起動させていきます。**ですがここで注意点が…！**
上記のように起動させると、localhostでアクセスしても表示されません。

なので以下のコマンドで起動させていきます。

```bash
gatsby develop -H 0.0.0.0
```

buildが終わって、`localhost:8000`へアクセスしてみると…？
![Screenshot from 2020-12-27 03-18-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436088/75248f9b-d2be-6711-313b-338b8fcaf4bd.png)

このような画面が出ていれば成功です！！！:laughing:

## Netlifyを使って世界中に向けて配信していく

[Netlify](https://www.netlify.com/)のアカウントを持っていない方は、GitHubアカウントがあれば簡単に登録できるので、登録してください。

アカウントを登録するとマイページみたいなところに飛ぶので、以下ボタンを探してください。
![Screenshot from 2020-12-27 03-26-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436088/df166116-94cb-f396-519c-4325bc7c8f5b.png)
ここを押すと、GitHubのリポジトリと連携することが出来ます。

![Screenshot from 2020-12-27 03-31-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436088/e03b33fe-ff63-4275-6902-d8d0a1cb5e5a.png)

最後はこのような感じで入力してください。

### もしdeployに失敗してしまった場合
右上にある`Site settings`を押して、`Build & Deploy`を選択、`Edit settings`を押して、以下のように記述してください。

![Screenshot from 2020-12-27 03-34-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436088/a70db0bf-95d5-f3d1-c37c-01eec501cbad.png)

### サブドメインの変更
今のままでもNetlifyからであればアクセスは可能ですが、まだ外部の方はアクセスすることが出来ません。
そこでサブドメインを設定することによって、外部からでもアクセスが可能となります。

方法は先ほどと同様に`Site settings`から、次は`Domain management`へ移動、`Options`から`Edit site name`を選択するとサブドメインの変更が可能となります。

例えばサブドメインを`sample`にしたとすると、`https://sample.netlify.app`がドメインとなります。
これでどこからでもアクセスが可能となったはずです！！

## GitHubを使った変更の自動デプロイ
実は何も設定する必要はございません。笑

GitHubにてDefaultのリモートブランチとなっているところに、Pushするだけ。
これによりNetlify側が発火して、自動でデプロイを行ってくれます！(献身的です:cry:)

## さいごに
最後まで見て頂きありがとうございました。

スターターライブラリは何を使おうか迷ったり、
ルートディレクトリのGatsby下にファイルを生成しているので、他の方の記事を見ながらやっていると、NetlifyのBuildで少し躓いたりと僕はしていましたが、比較的簡単に導入できるので、皆さんやってみてはいかがでしょうか！

間違っている点やシンプルな感想、よかった点などでもございましたら、お気軽にコメントください(´艸｀*)