Goal of this article
Display the welcome page for the React and Next application.
See below for setting up Nuxt.js. ↓
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.
Windows
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!
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.
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
- 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.
コメント