Easily install Vue CLI with docker and build a vue development environment (* I created a Docker environment on Vagrant and worked there, but I will omit it this time)
vue
├ src
│ ├ app → Here is the source code of vue
│ └ scripts
│ └ startup.sh → Script you want to execute when the container starts
├ Dockerfile
└ docker-compose.yml
First, prepare a Dockerfile.
FROM node:lts-alpine
WORKDIR /src
#Run on image creation Install Vue CLI
RUN npm install -g @vue/cli
#Copy sh file to container
#This time, start up what you want to execute when starting the container.Described collectively in sh (described later)
COPY ./src/scripts/startup.sh /scripts/startup.sh
#sh file permission change
RUN chmod +x /scripts/*
#Execute at the timing of container startup This is commented out first
#ENTRYPOINT ["/scripts/startup.sh"]
WORKDIR /src/app
FORM
Specify the base image name
This time I used lightweight alpine
WORKDIR
Specify the working directory in the container.
RUN
Specify the command to be executed when building the image.
Here we have the Vue CLI installed.
COPY
Add files to the image.
This time, I want to put together the scripts I want to execute when starting the container in one file, so
Copy this file to the container. (The contents of the script will be described later)
ENTRYPOINT
Executed when the container is started (docker start, docker run, etc.).
Here, it is specified to execute startup.sh copied above.
Prepare the startup.sh specified in the Dockerfile earlier. Since I want to start the application at the same time as starting the container, I am trying to execute npm install and npm run serve inside the container.
src/scripts/startup.sh
#!/bin/sh
#package.Install the package described in json
echo "npm install..."
npm install
#Launch the app
echo "npm run serve"
npm run serve
docker-compose.yml
version: '3'
services:
app:
build: .
ports:
- 8080:80
volumes:
- ./src:/src
- vue-cli-node-modules-volume:/src/app/node_modules
volumes:
vue-cli-node-modules-volume:
version
Format version of docker-compose.
services
Describe the definition of a service (think of it as a container).
In the above example, various settings are made with the service name app.
Specify the path of Dockerfile. You can also specify as follows.
build:
context:Dockerfile path
dockerfile:file name
ports Specifying the port. In the above example, 8080 of the Docker host is specified as 80 of the container.
volumes
./src:/src
Synchronize the host's src directory and below with the src in the container.
vue-cli-node-modules-volume:/src/app/node_modules
Specify what you do not want to copy to the host side. The volume vue-cli-node-modules-volume to put node_modules is specified, and node_modules is out of synchronization. Volumes are described below.
volumes
Specify the volume used by the container. This time it's named vue-cli-node-modules-volume. If the volume does not exist, it will be created, so you do not need to create it first.
That's all for preparation! !!
Based on the Dockerfile created first, build an image with the following command.
Terminal
$ docker-compose build
Just in case, make sure that the image is created.
Terminal
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
vue_app latest 784a3fd0ee9a 1 hours ago 433MB
Create a project with the following command. Specify the service name app.
Terminal
$ docker-compose run app vue create .
Create a project in the current directory.
Since it was described as WORKDIR/src/app
at the end of the Dockerfile, it will be created in the app directory.
(* You will be asked variously, but please select as appropriate and create a project)
When completed successfully, your application should be in vue/src/app on your host.
Before starting the container, uncomment the part that was commented out earlier.
Dockerfile
#Execute at the timing of container startup This is commented out first
ENTRYPOINT ["/scripts/startup.sh"]
The reason I comment it out first is that when I build the image above, the project file doesn't exist, so it doesn't make sense to run npm run serve.
I modified the Dockerfile, so I'll rebuild it.
Terminal
$ docker-composer build
Now when you start the container, npm install and npm run serve will run.
Finally start the container. You can start it in the background by adding the -d option.
If you remove the option, you can see that the script is running with the npm install ...
and npm run serve
that you echoed in startup.sh.
Terminal
$ docker-compose up -d
By the way, if you try to enter the container with the following command, you can confirm that the project under src and startup.sh are synchronized.
Terminal
$ docker-compose exec app
If you enter the host side port (8080 this time) specified in docker-composer.yml and check it with a browser, the following page should be displayed safely.
Recommended Posts