Docker发布vue项目--nginx发布前端项目

Docker发布vue项目(nginx发布前端项目)

本文使用nginx作为vue站点的服务器,所以会依赖nginx镜像,并在容器中同时启动nginx.

下面一系列参考下载word文档结合配置：(12条消息) 腾讯云Ubuntu配置+Lunix发布.net6.0api+发布vue-C++文档类资源-CSDN文库

参考：

http://www.dockerone.com/article/8834

https://blog.csdn.net/zxy15974062965/article/details/123341056

一、打包vue

　　1、在.env.production配置文件中,配置引用生产环境的Api

　　2、npm run build命令打包

　　3、本机创建一个文件夹用于存放vue打包文件和Dockerfile、把刚刚打包文件复制到这个创建的目录

　　4、在文件夹中添加一个文本文件,并改名为Dockerfile、并输入内容

保存为这个，否则后面会出错

　　5、再创建nginx文件夹,用于存放nginx容器的文件,并创建conf.d,html,log三个文件

　　6、在conf.d文件夹中创建文本文件,并改名为default.conf　　

server {
    listen       80;
    server_name  SystemContentProjectWebClient;
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

default.conf

-----------------------------------------------------------------------------------------------------------------

二、以下就是在云主机上操作linux--使用的是腾讯云linux系统

　　1、在服务器上创建存放vue打包项目的文件夹、并将上面本机打包好的vue文件所在文件夹复制到这里(云主机上)

　　2、putty进入打包文件文件夹---并构建vue项目镜像

docker build -t scpwc_image .

　　　　出现错误：　　

　　　　解决：

(12条消息) Error response from daemon: Unknown instruction: FROM CENTOS_水的精神的博客-CSDN博客

　　　　重新保存下Dockerfile文件--然后重新从本机拷贝下--

　　　　接着还有错

　　　在WinSCP上打开dockerfile文件发现有乱码--删掉

　　接着重新执行命令-成功

　　3、启动容器,发布网站

　　　　3-1、在服务器的网站目录下创建存放vue项目的目录+并将上面发布文件复制到网站目录下

cp -f -r /home/ubuntu/ycf/public/GroupThreeObject02Vue/groupThreeprogram02vue /home/ubuntu/ycf/websize/vue/9206

　　4、启动vue 项目docker

docker run -itd \
--name scpwc_vue_project_9206 \
--restart=always \
-p 9206:80 \
-v /home/ubuntu/ycf/websize/vue/9206/groupThreeprogram02vue/nginx/conf.d \
-v /home/ubuntu/ycf/websize/vue/9206/groupThreeprogram02vue/nginx/html/ \
-v /home/ubuntu/ycf/websize/vue/9206/groupThreeprogram02vue/nginx/log:/usr/log/nginx \
scpwc_image