docker 发布vue 项目，linux发布vue项目

1744人阅读 2020/9/9 19:19 总访问：3514147 评论：0 收藏：0 手机

分类: docker

nginx发布vue参考：https://www.tnblog.net/aojiancc2/article/details/7510


### 先使用这个命令打包一下vue项目 npm run build

然后在项目的dist就可以看到打包出来的了。就可以直接点击访问了。
然后其实就是用docker装一个nginx，把nginx访问的页面指向发布出来这个地址就行了。当然发布出来的内容要上传到服务器上。

**发布的时候可以在package.json中配置不同的发布命令，以使用不同的配置文件**
比如：
```
"scripts": {
  "build:prod": "vue-cli-service build",
  "build222": "vue-cli-service build",
  "build:19": "vue-cli-service build --mode 19",
  "build:stage": "vue-cli-service build --mode staging",
}
```
npm run build:19 发布的时候就走的.env.19环境变量的配置
npm run build: prod 发布的时候就走的.env.production配置，以此类推即可

### 把vue项目打包出来的内容上传的服务器上

可以在服务器上先创建一个文件夹

![](https://img.tnblog.net/arcimg/aojiancc2/9873fe54b0d74f119dd4618863798771.jpg)

然后随便借助一个ftp工具就可以上传上去了
![](https://img.tnblog.net/arcimg/aojiancc2/a9d653a79f544a16820db739ea22756f.jpg)

### 然后使用docker安装nginx，指定挂载目录到上传这个目录就行

注意这个有一个路径的坑，如果这样挂载目录
```
docker run -d \
 --name=mynginx \
 -p 8002:80 \
 -v /fb/wy_jbland_vue:/usr/share/nginx/html \
nginx
```
tn2>这样我们是把nginx里边的html目录挂载到我们的/fb/wy_jbland_vue，这样我们访问是回报错：docker nginx 403 Forbidden。因为里边没有没人没有index.html。但是我们明明刚刚把内容上传到wy_jbland_vue目录了。其实是我们使用了斜杠“/”就表示linux的根目录了。但是我们刚刚创建的文件夹和上传的内容是在root下面的wy_jbland_vue下面，所以造成了问题。-。-一个简单的路径问题坑惨了。

**所以应该这样使用就行了**
```
docker run -d \
 --name=mynginx \
 -p 8002:80 \
 -v ~/fb/wy_jbland_vue:/usr/share/nginx/html \
nginx
```
把斜杠换成~就对了，~在linux就表示root目录。下次内容要更新的话，直接把新的内容替换到~/fb/wy_jbland_vue目录就行了

这样挂载出来的目录如果没有权限可以执行以下
```
chmod -R 777  ~/fb/wy_jbland_vue
```

### 我们还可以把docker安装的nginx的配置文件挂载出来，方便随时修改

docker里边nginx的配置文件默认是在/etc/nginx/conf.d 路径下面
```
## 进入容器
docker exec -it mynginx /bin/bash
## 进入默认配置文件所在目录
cd /etc/nginx/conf.d
## 查看默认配置
cat default.conf
```
![](https://img.tnblog.net/arcimg/aojiancc2/7fe4d125c8c54df58ebbc019b2bc3138.png)

**查看一下默认的配置文件**
其实就是平时在windows下用的一样。默认访问的就是/usr/share/nginx/html下面的index.html。所以我们把/usr/share/nginx/html目录挂载到我们刚刚创建的~/fb/wy_jbland_vue就能访问我们发布的vue项目了。
![](https://img.tnblog.net/arcimg/aojiancc2/1780e616746b4915863fc3b730d91e5b.png)

**我们要想配置文件方便修改，直接挂载出来就行**


### 总结一下步骤

发布-->上传-->运行nginx镜像,指定挂载到上传目录

**发布**：
```
npm run build   
```
打包出来就是dist目录里边的

**运行nginx镜像：**
```
主要注意挂载目录
docker run -d \
 --name=mynginx \
 -p 8002:80 \
 -v ~/fb/wy_jbland_vue:/usr/share/nginx/html \
nginx
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

docker 发布vue 项目，linux发布vue项目

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}