docker安装nginx,发布部署vue项目

场景

前后端项目,实现前后端简单部署到服务器。前端vue,后端springboot。服务器ubuntu(18.04)<linux系统同理>.
后端通过(nohup java -jar xxx.jar &) 指令简单部署。该文主要说明部署前端vue项目。
部署vue需要安装nginx。安装nginx方式有两种,1、可以在服务器上下载nginx压缩包,解压即可。2、使用docker容器。该文使用docker容器安装,压缩包,可自行百度一下。

docker安装nginx

1、安装 docker pull nginx。安装最新版本即可。

在这里插入图片描述

2、启动nginx容器。

在这里插入图片描述

docker run -p 80:80 --name nginx -d nginx:latest

(1)–name:确定容器的名字。
(2)-d 指定容器是后台运行。
(3)-p 容器暴露端口号。
(4)nginx 指定镜像,因为我们这里下载的是nginx的最新版,所以可以不用加版本号,但是如果下载的不是最新版,则需要加版本号,举个例子nginx:1.2.45,大概这样!

3、我们需要更改nginx配置。所有需要将docker容器中nginx文件挂载到宿主机上面。

①新建nginx目录

在这里插入图片描述

②复制nginx容器配置文件到宿主机上。(nginx容器须开启,运行状态)

在这里插入图片描述

③查看nginx.conf配置。nginx容器的nginx.conf挂载在宿主机上,以后修改下面配置文件就可以了。

在这里插入图片描述

④关闭nginx 容器,删除nginx容器,重新启动挂载nginx指令。

在这里插入图片描述

首先关闭nginx容器,然后重新运行,挂载nginx容器和宿主机器。上面指令是将nginx容器的nginx.conf、conf.d、log、html挂载到宿主机上。具体指令含义自行百度吧。
docker run -p 80:80 --name nginx -v /myself/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /myself/nginx/conf/conf.d:/etc/nginx/conf.d -v /myself/nginx/log:/var/log/nginx -v /myself/nginx/html:/usr/share/nginx/html -d nginx:latest
⑤现在nginx挂载容器已经启动了。接下来就是修改nginx.conf配置文件。默认配置文件如下。
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

修改配置文件:

user  root;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    #include /etc/nginx/conf.d/*.conf;
    server {
	listen 80;
	server_name xxx.xx.x.xx;
	location / {
		root   /myself/nginx/html/dist;
		index  index.html index.htm;
		try_files $uri $uri/ /index.html;
	}
	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://xxx.xx.x:8080/;
        }
    }
}

需要注意的地方:因为启动容器nginx,所以root配置的路径需要写挂载到宿主机里面的路径,否则就会404。try_files $uri $uri/ /index.html; 这一行代码必须加,否则,刷新之后报404。location /prod-api/ 这段代码看情况吧,解决跨域问题。

备注

因为docker容器是用80映射到nginx容器,(nginx端口默认是80),所以直接浏览器访问xxx.xx.x.xxx就可以了。
如果出现报错,403、404、500等。可以在nginx/log 目录下查看error.log。因为宿主机已经挂载了nginx容器中log文件。

以上内容个人理解,如有问题,还请多多指教。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值