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

8390 ワード
docker-compose TypeScript Netlify gatsby Docker TypeScript テキストリンク

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

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

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

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

上記の流れで本記事ではご紹介していきます(・∀・)
完成後のサンプルリポジトリはコチラ

開発環境

  • 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
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を紹介した場所に作成して、以下の記述をしていきましょう！

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ファイルが配置できれば、ビルド後、コンテナを立ち上げていきましょう！

$ docker-compose build
$ docker-compose up -d

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

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

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

Dockerのコンテナ内に入る

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

$ docker-compose exec gatsby bash

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

Starter Libraryの導入

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

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

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

gatsby-starter-typescript-plusでした！
リンクはコチラから

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

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

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

下記のような表示が出てきたら成功です！！

いよいよ表示させていく！

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

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

gatsby develop -H 0.0.0.0

buildが終わって、localhost:8000へアクセスしてみると…？

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

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

Netlifyのアカウントを持っていない方は、GitHubアカウントがあれば簡単に登録できるので、登録してください。

アカウントを登録するとマイページみたいなところに飛ぶので、以下ボタンを探してください。

ここを押すと、GitHubのリポジトリと連携することが出来ます。

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

もしdeployに失敗してしまった場合

右上にあるSite settingsを押して、Build & Deployを選択、Edit settingsを押して、以下のように記述してください。

サブドメインの変更

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

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

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

GitHubを使った変更の自動デプロイ

実は何も設定する必要はございません。笑

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

さいごに

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

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

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