vue--docker+nginx简单部署vue项目

nginx笔记
前提：项目中的api请求都是"127.0.0.1:8080"
这里使用的docker是window的，在本地进行的

打包vue项目

打包vue，生成打包文件，如下图的dist文件夹

npm run build

Dockerfile文件的创建和编写

FROM nginx
#把打包好的内容复制到指定的路径--/usr/local/nginx/html/ 这里就是把dist下的文件复制到该路径下，没有dist文件夹
COPY dist/  /usr/local/nginx/html/
# /etc/nginx/nginx.conf是使用nginx构建容器情况下，nginx默认的服务路径，默认的配置文件就在这个路径下，这里的想做的就是用自己的，我们自定义的配置文件覆盖默认的文件
COPY nginx.conf /etc/nginx/nginx.conf

#user  nobody;
#worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

 include /etc/nginx/mime.types;
events {
    worker_connections  1024;
}

http{
 server {
            listen 80;
            server_name localhost;
            location / {
                root /usr/local/nginx/html/; #html访问路径
                index index.html index.htm; #html文件名称
            }
            #这里我将一些图片放到了Windows主机的某个文件夹下，然后容器下的/img路径与其挂载，工程中src赋值为"'/img/xxxx.jpg'"
            location /img/ {
                alias /img/;
            }
    }
}

构建镜像

注意: 每次构建镜之前先确定打包文件是不是最新的，也就是每次构建镜像之前，先打包
docker build -f dockerfile文件路径 -t 自己定义的镜像名:版本号 .

D:\frontCode\robot-pcshare-web>docker build -f D:\frontCode\robot-pcshare-web\Dockerfile -t robot-pcshare-web:1.0 .

如果进入到了dockerfile的所在路径，就可以不用-f dockerfile文件路径了

运行容器，访问服务

docker run -d --name robot-pcshare -p 80:80 -v D:/dockerVolumes/img:/img robot-pcshare-web:1.0

在浏览器访问http:localhost即可