ubuntu利用docker部署使用nginx的vue项目

2 篇文章 0 订阅
1 篇文章 0 订阅

本文章同适用于前后端分离项目,后端的docker部署详见https://blog.csdn.net/Junior_Liu/article/details/109225303

  1. 项目打包前先修改代理信息,例如本文项目对应后端的ip:192.168.137.4:9000

  2. npm run build 打包项目,生成dist文件夹

  3. 将dist文件夹放在ubuntu下任意文件夹,在同一文件夹下创建Dockerfile

    sudo touch Dockerfile
    
  4. 编写Dockerfile

    例如:

    FROM nginx:stable-alpine
    COPY dist/ /usr/share/nginx/html
    EXPOSE 80
    CMD ["nginx","-g","daemon off;"]
    

    详细参数: https://blog.csdn.net/qq_29999343/article/details/78318397

  5. 制作镜像

    sudo docker build -t koyanagi-front:1.0 .
    
    • koyanagi-front 为自定义镜像名,1.0为版本号,. 表示在当前路径下构建镜像
  6. 创建并运行容器

    sudo docker run -p 8081:80 -d --name koyanagi_front koyanagi-front:1.0
    
    • -p 后面跟宿主机端口:Dockerfile里指定的端口,指将容器里项目用的80端口映射到宿主机端口8081,宿主机端口随意一个空闲端口就行
    • –name 后面跟容器名,随意
    • koyanagi-front:1.0 指所用镜像名

    访问宿主机ip:8081,例如本例:192.168.137.4:8081

    注:如果出现nginx 403 Forbidden error页面,首先查看下/usr/share/nginx/html下是否有index.html或index.htm文件。查看命令:

    sudo docker exec [容器名] ls /usr/share/nginx/html
    

    如果存在,那么就是nginx没有访问该目录的权限。

    把nginx的启动用户改成目录的所属用户(容器内的nginx.conf文件无法改动,可以在宿主机新建一个nginx.conf,再通过Dockerfile将nginx.conf复制过去)

    或者直接赋予/usr/share/nginx/html文件夹777权限

    sudo docker exec [容器名] chmod -R 777 /usr/share/nginx/html
    

附带一份nginx.conf

worker_processes  1;

events {
 worker_connections  1024;
}

http {
 include       mime.types;
 default_type  application/octet-stream;
 sendfile        on;
 keepalive_timeout  65;

 server {
     listen       80;
     server_name  localhost;

 	location / {
         root   /usr/share/nginx/html;
 		try_files $uri $uri/ /index.html;
         index  index.html index.htm;
     }
 	# 这里配的是生产环境的反向代理地址
 	location /prod-api/{
 		proxy_set_header Host $http_host;
 		proxy_set_header X-Real-IP $remote_addr;
 		proxy_set_header REMOTE-HOST $remote_addr;
 		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 		proxy_pass http://39.97.164.xx:9002/;
 	}

     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
         root   html;
     }
 }
}

参考https://stackoverflow.com/questions/27303967/nginx-403-forbidden-error

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值