Docker部署Vue+Node

ccwss
171 阅读2分钟

首先使用vue-cli创建一个vue项目，然后在App.vue中添加一行请求外域数据代码：

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

然后我们npm run build 生成dist文件夹，接着我们准备把该文件夹放到nginx中。首先我们在根目录下创建nginx文件夹，在里面创建default.conf文件，里面写入

# 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;
    }
}

现在我们可以把前端代码部署到docker上了。首先根目录创建Dockerfile文件，这里我只写了一行代码：

# frontend/Dockerfile
FROM nginx

然后执行根据该文件创建一个docker镜像,执行docker build -t <image-name> .，这里的<image-name>自定义。这时我们的一个镜像创建成功了。

接下来根据该镜像创建一个容器，首先执行docker images查看所有镜像，找到刚刚创建的镜像，然后执行 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/ <image-name>，这里的<image-name>就是刚刚我们自定义的镜像名，也可以换成该镜像名对应的镜像ID。同时我把本地的两个目录挂载到docker上，也就是说，我们如果修改dist和nginx两个目录下的代码，docker中对应的文件也会发生修改。对于nginx，如果我们修改了它的配置文件，我们还需要reload一下，所以如果我们修改了nginx/default.conf文件，我们需要执行docker exec <container-id> nginx -s reload，这里的<container-id>就是刚刚我们利用镜像创建的容器的ID，我们可以通过docker ps查看当前正在运行的docker容器，然后找到对应容器的ID。

现在我们浏览器打开http://localhost:8081，就可以看到页面成功显示了。此时如果我们修改dist文件中的代码，再回到浏览器刷新一下页面，能看到页面信息跟着同步刷新了，这是因为我们把项目中的dist目录挂载到了docker对应的目录，其实两者使用的是同一个文件夹，如果我在Dockerfile中写了COPY dist/ /user/share/nginx/html/，那么我们修改项目中的代码不会影响docker中的文件。但是现在有一个问题，就是打开页面控制台，会发现有一个报错，那是因为咱们后台还没写。

现在我们来做后端，首先我们再创建一个server文件及，里面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);

然后在该目录下再创建一个Dockerfile文件，里面写上:

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

然后创建一个.dockerignore文件，里面写上：

# server/.dockerignore
node_modules
npm-debug.log

现在我们再创建一个新的镜像，执行docker build -t <image2-name> .，然后根据该镜像创建一个容器，执行docker run -d -p 3001:3000 <image2-name> node app.js。这时我们再刷新浏览器页面，打开控制台发现数据请求成功。

这篇文章参考了[手把手系列之]Docker 部署 vue 项目 。相关代码放在github上了。

avatar
文章
阅读
粉丝