vue.js-陌上烟雨遥

网上看到很多文章是用nginx部署vue项目，但我是想用多个容器搭建一个开发环境。

项目结构如下：

nginx容器，用于在80端口启动web服务，并通过反向代理，把请求转发到其它服务端口。
nodejs 服务端，服务监听端口8000。
vue web端，服务监听端口为8080。

先贴docker-compose.yml的代码：

version: "3" services: nginx: image: nginx:1.16.0 container_name: nginx-1.16.0-container volumes: - ./project-config/nginx/nginx.conf:/etc/nginx/nginx.conf - ./project-config/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf ports: - "80:80" server: build: ./server container_name: node-10.16.0-container volumes: - ./server:/code ports: - "8000:8000" command: /code/entrypoint.sh web: build: ./web container_name: vue-container command: vue ui --host 0.0.0.0 --port 7000 --headless command: npm run serve volumes: - ./web:/code ports: - 7000:7000 - 8080:8080

下面是nginx的反向代理配置

# 这里的server和web，就是上面docker-compose.yml里配置的名字。 location /wechat/ { proxy_pass http://server:8000; } location /home/ { # rewrite ^/home/(.*)$ /$1 break; proxy_pass http://web:8080; }

server目录下有个index.js,用于启动8000端口

const express = require('express') const app = express() const port = 8000 app.use('/wechat', (req, res) { res.send('This is Nodejs server') }) // 启动服务器 app.listen(port, () => { console.log("HTTP server listening on port %s", port) })

另外，web是用vue create web这样的方式创建的。当运行npm run serve的时候，就会起来监听8080端口，期间用vue.config.js改过启动端口，但那样，docker做了端口映射后，也访问不到。