How to get started with Gatsby (TypeScript) x Netlify x Docker

Good news for me, who pays for the blog server again this month, even though I'm not making any money. There is a way to get your blog to the world ** for free ** using ** Gatsby x Netlify **! !! ** **

This time, I will introduce how to distribute a blog while using Docker: muscle:

First of all, check the overall flow smoothly

  1. Build a Docker environment to start Gatsby
  2. Build a site with Gatsby (TypeScript)
  3. Automatically deploy articles by linking Netlify with GitHub

I will introduce it in this article according to the above flow (・ ∀ ・) Click here for the sample repository after completion

Development environment

Checking the file structure

I usually read Qiita's articles and always think "I want to know the file structure" (laughs). I will post the file structure after completion.

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

Environment construction with Docker

Docker will be used as a local node execution environment!

Dockerfile Place the Dockerfile in the location I introduced earlier and write the following!

Dockerfile


FROM node:12.17.0

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

RUN yarn global add gatsby-cli

FROM gets the image, RUN creates the gatsby-ts-netlify-docker folder, and WORKDIR sets the working directory. Finally, we have added gatsby-cli, which is the heart of this time, to global.

docker-compose.yml

If you can write it, create it in the place where you introduced docker-compose.yml and write the following!

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

Tell the location of the Dockerfile with build. Use tty and stdin_open to set the connection between the container and the host, use volumes to match the host and the container directory, and use ports to set the port for setting up the server locally. ..

Build & launch

If you can place the Dockerfile and docker-compose.yml files, let's start the container after building!

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

The container is now built and launched!

Build your site with Gatsby

This time, we will build a site using the Starter Library that supports TypeScript.

Go inside a Docker container

First let's go inside the container to execute the command: open_hands:

$ docker-compose exec gatsby bash

I think you've put it in the container now!

Introduction of Starter Library

The Library that I decided to introduce this time has the following features.

--Written in TypeScript --Minimal configuration

Therefore, the one chosen was ...

It was ** gatsby-starter-typescript-plus **! Link from here

We will introduce this.

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

If you think "It will take time", please be assured that it is a normal specification ~ (* ´∀ ` *)

If you see the following display, you are successful! !! Screenshot from 2020-12-27 03-13-35.png

I will finally display it!

As you can see in the image, start the server with gats by develop. ** But there is a caveat here ...! ** ** If you start it as above, it will not be displayed even if you access it with localhost.

So, start it with the following command.

gatsby develop -H 0.0.0.0

After building, when I try to access localhost: 8000 ...? Screenshot from 2020-12-27 03-18-30.png

If you see a screen like this, you're successful! !! !! : laughing:

Distribute to the world using Netlify

If you do not have a Netlify account, you can easily register if you have a GitHub account, so please register.

When you register an account, you will be taken to a place like My Page, so please look for the button below. Screenshot from 2020-12-27 03-26-19.png If you press here, you can link with the GitHub repository.

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

Please enter like this at the end.

If deploy fails

Press Site settings in the upper right corner, select Build & Deploy, press Edit settings, and write as follows.

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

Subdomain change

You can still access it from Netlify, but outsiders can't access it yet. By setting a subdomain there, you can access it from the outside.

As before, go to Site settings, then to Domain management, and select Edit site name from Options to change the subdomain.

For example, if you set the subdomain to sample, then https://sample.netlify.app will be the domain. You should now be able to access it from anywhere! !!

Automatic deployment of changes using GitHub

Actually, you don't need to set anything. Lol

Just push to the default remote branch on GitHub. This will ignite the Netlify side and deploy it automatically! (Dedicated: cry :)

at the end

Thank you for watching until the end.

I'm wondering what to use for the starter library Since the file is generated under Gatsby in the root directory, I was a little stumbled on Netlify's Build when I was doing it while looking at other people's articles, but it is relatively easy to introduce. Why don't you try it!

If you have any mistakes, simple impressions, or good points, please feel free to comment (´ 艸 ` *)

Recommended Posts

How to get started with Gatsby (TypeScript) x Netlify x Docker
[Note] How to get started with Rspec
How to get started with Eclipse Micro Profile
Get started with DynamoDB with docker
How to get started with creating a Rails app
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Express ~
How to get along with Rails
How to get started with JDBC using PostgresSQL on MacOS
How to start Camunda with Docker
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ MySQL edition ~
How to build [TypeScript + Vue + Express + MySQL] environment with Docker ~ Sequelize ~
How to share files with Docker Toolbox
[Rails] How to use rails console with docker
How to run Blazor (C #) with Docker
How to build Rails 6 environment with Docker
How to build a Ruby on Rails development environment with Docker (Rails 6.x)
How to build a Ruby on Rails development environment with Docker (Rails 5.x)
How to mock each case with Mockito 1x
How to get a heapdump from a Docker container
How to give your image to someone with docker
Maybe it works! Let's get started with Docker!
How to use docker compose with NVIDIA Jetson
Rails beginners tried to get started with RSpec
How to get resource files out with spring-boot
How to use nginx-ingress-controller with Docker for Mac
[Rails] How to build an environment with Docker
How to build an environment of [TypeScript + Vue + Express + MySQL] with Docker ~ Vue edition ~
Getting Started with Docker
Get started with Gradle
[Introduction to Docker x ECS] ECS deployment with docker compose up
How to build docker environment with Gradle for intelliJ
[Docker environment] How to deal with ActiveSupport :: MessageEncryptor :: InvalidMessage
I tried to get started with Spring Data JPA
How to delete untagged images in bulk with Docker
Get started with "Introduction to Practical Rust Programming" (Day 3)
How to make Laravel faster with Docker for Mac
[Docker + Rails] How to deal with Rails server startup failure
How to get jdk etc from oracle with cli
Let's write how to make API with SpringBoot + Docker from 0
Get started with Spring boot
How to get values in real time with TextWatcher (Android)
How to set Docker nginx
How to update with activerecord-import
How to build Rails, Postgres, ElasticSearch development environment with Docker
How to use mysql with M1 mac Docker preview version
Now is the time to get started with the Stream API
I tried to get started with Swagger using Spring Boot
Easy code review to get started with Jenkins / SonarQube: Static analysis
How to realize huge file upload with TERASOLUNA 5.x (= Spring MVC)
How to install Pry after building Rails development environment with Docker
Make a C compiler to use with Rust x CLion with Docker
How to run a job with docker login in AWS batch
How to get boolean value with jQuery in rails simple form
How to install Adopt OpenJDK on Debian, Ubuntu with apt (-get)
How to build Rails + Vue + MySQL environment with Docker [2020/09 latest version]
[For those who create portfolios] How to use binding.pry with Docker
How to scroll horizontally with ScrollView
Let's get started with parallel programming
How to use Java HttpClient (Get)
How to enclose any character with "~"
How to run JavaFX on Docker