スポンサーリンク

Setup React.js/Next.js development with Docker and docker-compose

Development Environment
スポンサーリンク

Goal of this article

Display the welcome page for the React and Next application.

See below for setting up Nuxt.js. ↓

Setup Vue/Nuxt development with Docker and docker-compose
It is very easy to set up a development setup with docker. Node.js 14.15.4 is installed. On top of that, we have Nuxt.js installed.

Development tools to be prepared

  • Docker 20.10
  • docker-compose 1.27.4
  • git 2.25

If you have not installed Docker and docker-compose

MacOS

Install Docker from the official website.

Docker Desktop for Mac

Windows
Setting Up Docker and docker-compose on WSL2
Setting Up Docker and docker-compose on WSL2.Installing WSL2. Installing Docker 20.10.1 . Installing docker-compose 1.27.4

Version of Node.js

  • Node.js: 14.15.4

Clone the Dockerfile repository

The Dockerfile for Next.js development is available on github, so please clone it!

E-handson/docker-next
Contribute to E-handson/docker-next development by creating an account on GitHub.

Start a terminal and run the clone command.

$ git clone https://github.com/E-handson/docker-next

After the clone is complete, the “docker-next” directory will be created.
Execute the cd command.

$ cd docker-next

You will find docker-compose.yml under the docker-next directory.
The docker-compose command can be executed directly under the directory where docker-compose.yml exists.

スポンサーリンク

Building Docker

First, execute the following command to build the Docker service.

$ docker-compose build
スポンサーリンク

Install the Next.js application

When you install Next.js, you can give it the “–typescript” option. By doing so, TypeScript can be used.

$ docker-compose run --rm next yarn create next-app . --typescript

Execute the above command to create the src directory.
When developing, the next.js files will be placed directly under the src directory, so please modify them.

Runing Docker

Next, execute the following command to run the Docker service.

$ docker-compose up

I have set “command: yarn run dev” in docker-compose.yml, so when I run docker-compose up, I can immediately see that it is running in the browser.

http://localhost:9001/

This completes the Next.js development setup.

スポンサーリンク

To install a React application

When you install React.js, you can give it the “–typescript” option. By doing so, TypeScript can be used.

$ docker-compose run --rm next npx create-react-app . --template typescript

Execute the above command to create the src directory.
When developing, the React.js files will be placed directly under the src directory, so please modify them.

Modify docker-compose.yml

In line 10, change “command: yarn dev” to “command: yarn start”.

Runing Docker

Next, execute the following command to run the Docker service.

$ docker-compose up

Go to “http://localhost:9001” and if you see the welcome page, you are done.
http://localhost:9001/

This completes the React.js development setup.

スポンサーリンク

Docker Container Configuration

Repository configuration

docker-next
├── docker-compose.yml
├── docker
│    └── next
│         └── Dockerfile
└── src

With git clone, the “src” directory does not exist.
It will be created after Next is installed.

Container configuration

  1. next container – Node.js: 14.15.4 installed
next container

This is the container where Next is installed.
The Next source installed in the “/workspace” of the app container is mounted under the local src/ distribution.

スポンサーリンク

コメント