完整的Vue项目发布,防止报404错。
Docker部署的应用需要上传文件,上传的静态文件需要通过nginx访问,出现nginx访问404问题!
首先可以确定nginx容器是正常启动的,但是前端代码部署的路径也没问题.
1、将vue项目编译,npm run build
之后形成的disk文件夹压缩成zip包,方便上传
在服务器上新建目录:
mkdir /app/myPro
将项目disk上传到myPro文件夹里
解压:
unzip disk
2、在myPro文件夹里新建dockerfile文件
Dockerfile内容如下:
#标准的nginx镜像,我们需要基于标准的nginx镜像制作自己的镜像
FROM nginx
#设置生成镜像的Author
MAINTAINER ss
VOLUME /tmp
#拷贝当前目录的文件到指定文件夹下,改文件夹为镜像中的文件夹
COPY dist/ /usr/share/nginx/html/
#拷贝.conf文件到镜像下,替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf
ENV LANG en_US.UTF-8
EXPOSE 80
EXPOSE 443
#输出完成
RUN echo 'build images is ok!'
3、在myPro文件夹里,新建ningx.conf文件,内容如下:
worker_processes auto;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
client_max_body_size 20m;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html; #配置Vue项目根路径
index index.html index.html; #配置首页
try_files $uri $uri/ /index.html; #防止刷新报404
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
4、创建镜像
docker build -t my-ui .
5、运行docker 容器
docker run --name my-ui -it -d -p 2889:80 my-ui
这样在浏览器里,http://ip:2889就可以访问了
不过这样挺麻烦的,一般都是用域名访问。
6、在宿主机的nginx里配置ninx.conf里加入域名访问,配置内容如下:
server {
listen 80;
server_name mypro.test.cn;
location / {
proxy_pass http://localhost:2889;
index index.html;
error_page 404 /index.html;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
这样通过 mypro.test.cn 就可以直接访问了。