I tried to make the environment for developing applications created with Nuxt into a Docker container.
| version | |
|---|---|
| Windows | 10 |
| Node.js | v14.15.0 |
| yarn | v1.22.10 |
Create a Nuxt app quickly with yarn create nuxt-app and first check that the app works properly.
> yarn create nuxt-app webapp
> cd webapp
> yarn dev
You should see it running at http: // localhost: 3000.
Next, create a Dockerfile file in the root directory inside your Nuxt app and write it as follows:
Dockerfile
FROM node:14.15.0-alpine3.12
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install
COPY . .
ENV HOST 0.0.0.0
EXPOSE 3000
CMD [ "yarn", "dev" ]
If you do not specify ENV HOST 0.0.0.0, you cannot connect from the host.
Also, create .dockerignore and place it in the same directory.
.dockerignore
node_modules
npm-debug.log
Execute the following command in the directory where the Dockerfile created earlier exists to build the Docker image.
> docker build -t qianer-fengtian/webapp .
> docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
qianer-fengtian/webapp latest 1a89469eeab5 37 seconds ago 982MB
node 14.15.0-alpine3.12 fdcffd80e219 6 weeks ago 117MB
Once the Docker image is built, run it.
> docker run -p 3000:3000 -d qianer-fengtian/anyplus-portal-webapp
I can do it properly.
> docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS
PORTS NAMES
705fb13c8369 qianer-fengtian/webapp "docker-entrypoint.s…" 3 seconds ago Up 2 seconds 0.0.0.0:3000->3000/tcp magical_euclid
> docker logs 705f
yarn run v1.22.5
$ nuxt-ts
ℹ Listening on: http://172.17.0.2:3000/
ℹ Preparing project for development
ℹ Initial build may take a while
✔ Builder initialized
✔ Nuxt files generated
ℹ Compiling Client
✔ Client: Compiled successfully in 3.08s
ℹ Waiting for file changes
ℹ Memory usage: 197 MB (RSS: 317 MB)
ℹ Listening on: http://172.17.0.2:3000/
No issues found.
After confirming that you can access it with a browser at http: // localhost: 3000, stop it.
> docker stop 705f
I would like to create docker-compose.yml in the parent directory of/webapp created this time and operate the Docker application with docker-compose.
docker-compose.yml
version: "3.8"
services:
webapp:
build: ./webapp
ports:
- "3000:3000"
After creating it, execute the following command to confirm the startup.
> docker-compose up
After confirming that it can be accessed with a browser at http: // localhost: 3000, I edit an appropriate file (such as index.vue) and try to change it, but I can not change it.
** HMR (Hot Module Replacement) ** is not enabled, so enable it.
Add the following settings to docker-compose.yml.
docker-compose.yml
version: "3.8"
services:
webapp:
build: ./webapp
ports:
- "3000:3000"
+ volumes:
+ - ./webapp:/app
The host directory / webapp / is mounted in the container directory / app so that code changes can be reflected.
In addition, add the following settings to nuxt.config.js so that the change can be detected on the webpack side.
config
+ watchers: {
+ webpack: {
+ aggregateTimeout: 300,
+ poll: 1000,
+ },
+ },
--aggregateTimeout ... Delay time (ms) from file modification to build start.
-- poll ... Polling interval time (s). Here, it is checked every second.
By the way, there is no problem even if you modify Dockerfile as follows after the above settings.
Dockerfile
FROM node:14.15.0-alpine3.12
WORKDIR /app
-
- COPY package.json .
- COPY yarn.lock .
RUN yarn install
-
- COPY . .
ENV HOST 0.0.0.0
EXPOSE 3000
CMD [ "yarn", "dev" ]
Now you can HMR.
Recommended Posts