Docker中部署前后端分离项目(vue+springboot)(二)

前面部署了后端，现在开始部署前端。
首先依然是打包vue文件，npm run build 然后在vue的项目目录下多出了一个
dist文件夹。
在这里插入图片描述
然后依旧是在linux中创建新的一个文件夹

这里的要说的就是这个nginx，由于我还没学nginx，所以暂时只知道nginx的作用大概就是可以做到反向代理，总之这个nginx文件夹中只有一个 default.conf配置文件，这个配置文件中的内容为

server {
listen       80;
server_name  localhost;
#charset koi8-r;
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;
}

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}}

Dockfile文件中的内容为：
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

这里要说一下的就是，原本安装完nginx然后访问的是nginx中的usr/share/nginx/html中的内容，我们现在做了配置之后就会让这些页面显示为dist中的页面…暂时不知道原理…

然后依旧是构建镜像文件：
docker build -t myvue .
然后生成容器：
docker run -p 8080:80 -d --name vueapp myvue

之后依旧是打开浏览器测试看能不能访问：
在这里插入图片描述
如果能访问，那么说明部署成功！