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

最新推荐文章于 2024-09-06 10:20:39 发布

Koyanagi小柳

最新推荐文章于 2024-09-06 10:20:39 发布

阅读量784

点赞数

分类专栏： docker nginx vue 文章标签： docker java nginx vue linux

本文链接：https://blog.csdn.net/junior_liu/article/details/109226360

版权

docker 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

nginx

1 篇文章 0 订阅

订阅专栏

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

项目打包前先修改代理信息，例如本文项目对应后端的ip：192.168.137.4:9000
npm run build 打包项目，生成dist文件夹
将dist文件夹放在ubuntu下任意文件夹，在同一文件夹下创建Dockerfile
```
sudo touch Dockerfile
```

编写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

制作镜像
```
sudo docker build -t koyanagi-front:1.0 .
```
- koyanagi-front 为自定义镜像名，1.0为版本号，. 表示在当前路径下构建镜像
创建并运行容器
```
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;
     }
 }
}