6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-26

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

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

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

  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ではイメージの取得、RUNgatsby-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

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

ビルド&立ち上げ

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

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

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

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

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

Dockerのコンテナ内に入る

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

$ docker-compose exec gatsby bash

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

Starter Libraryの導入

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

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

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

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

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

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

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

下記のような表示が出てきたら成功です!!
Screenshot from 2020-12-27 03-13-35.png

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

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

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

gatsby develop -H 0.0.0.0

buildが終わって、localhost:8000へアクセスしてみると…?
Screenshot from 2020-12-27 03-18-30.png

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

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

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

アカウントを登録するとマイページみたいなところに飛ぶので、以下ボタンを探してください。
Screenshot from 2020-12-27 03-26-19.png
ここを押すと、GitHubのリポジトリと連携することが出来ます。

Screenshot from 2020-12-27 03-31-16.png

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

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

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

Screenshot from 2020-12-27 03-34-42.png

サブドメインの変更

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

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

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

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

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

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

さいごに

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

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

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

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?