First create a VUE project using vue-CLI, then add a line of code to app.vue requesting outfield data:

// frontend/src/App.vue
axios.get('/api/json').then(res= >console.log(res)).catch(err= >console.log(err))
Copy the code

Then we NPM run build to generate the dist folder, which we are ready to put into nginx. First we create the nginx folder in the root directory and create a default.conf file in it

# frontend/nginx/default.conf server { listen 80; server_name localhost; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /usr/share/nginx/html; index index.html index.htm; } location /api/ { rewrite /api/(.*) /$1 break; Proxy_pass http://172.17.0.3:3000; }}Copy the code

Now we can deploy the front-end code to Docker. Create a Dockerfile from the root directory. Here I just write one line:

# frontend/Dockerfile
FROM nginx
Copy the code

Docker build -t

.

At this point one of our images has been created successfully.

Next, create a container based on the image. First, execute Docker Images to view all the images and find the image you just created. Docker run -d -p 8081:80 –mount type=bind,source=”$(PWD)”/nginx/,destination=/etc/nginx/conf.d/ –mount Type =bind,source=”$(PWD)”/dist/,destination=/usr/share/nginx/ HTML

You can also use the mirror ID corresponding to the mirror name. At the same time, I have mounted two local directories to docker, that is, if we modify the code in the dist and nginx directories, the corresponding files in docker will also be modified. For nginx, if we change the configuration file, we need to reload it, so if we change the nginx/default.conf file, we need to execute docker exec

nginx -s reload,

is the id of the container created by using the image. We can check the current running Docker container through docker ps and find the id of the corresponding container.


Now open the browser to http://localhost:8081 and see that the page is displayed successfully. At this point, if we modify the dist file, go back to the browser and refresh the page, we can see that the page information is synchronized to refresh. This is because we have mounted the dist directory in the project to the corresponding directory of the Docker. In fact, they use the same folder. If I write COPY dist/ /user/share/nginx/ HTML/in the Dockerfile, then we can modify the code in the project without affecting the docker file. But now there is a problem, is to open the page console, there will be an error, that is because we have not written the background.

Now let’s do the back end. First we’ll create a server file and write the code in app.js:

// server/app.js
const express = require('express');
const PORT = 3000
const app = express();
app.get('/'.(req, res) = > {
    res.send('Hello world\n');
});
app.get('/json'.(req, res) = > {
    res.json({
        code: 0.data :'This is message from node container'})}); app.listen(PORT);Copy the code

Create a Dockerfile in this directory and write:

# server/Dockerfile
FROM node
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
Copy the code

Then create a.dockerignore file that says:

# server/.dockerignore
node_modules
npm-debug.log
Copy the code

Now create a new image, execute docker build -t

. Then create a container from the image, execute docker run -d p 3001:3000

node app.js. Then we refresh the browser page and open the console to find that the data request was successful.

This article references the Docker Deployment Vue project in the Hand-in-hand series. The code is available on Github.