Nginx-记录一次部署项目的经过

发表于 | 分类于

述

上文中,安装配置好了nginx,然后下面就可以去使用了

我这里打算是部署一个VUE的前端项目,然后还有一个 Spring Boot 的 jar 包, vue是需要用到nginx部署的, nginx的端口需要是80,或者https要443, 这里就以http的为例

nginx 用了80端口, 也就是说后端的jar就不可以用80了, 但是我的项目中又使用了微信的接口,微信要求端口必须是80, 那么问题来了, 我一台服务器中,用到了两个 80 端口,这怎么搞

其实也简单,再买一台服务器就好了,但是,我没有钱,你说有钱多好,我要有钱我也这么玩儿,主要是没钱.

没办法,只能想办法用一台服务器去部署了,通过网上查了一些相关资料, 了解到一个解决方案, 就是用两个二级域名, 比如说,一个 www.xxx.com 用来访问前端的项目, 还有一个 api.xxx.com 用来访问后端的接口, 然后nginx监听 80 端口,通过不同的域名转发到前后端. 大概就是这么个流程, 下面来看下具体怎么操作

VUE打包用nginx部署

VUE项目在开发环境中,是使用 npm run dev 去运行的,但是在生产环境中,是要打包成一堆静态文件的, 命令是 npm run build 打包好了之后,会在项目的目录下生成一个 dist 的文件夹,里面有一个 index.html 和一个 static 文件夹,可能还有个icon,这个就是要传到服务器上去的东西

上文中,使用docker安装了nginx,并且映射出来几个目录, 其中有一个 /usr/local/docker/nginx/html 这个目录, 把打包好的文件都丢进去

上传完成之后需要去修改一下配置, /usr/local/docker/nginx/conf.d 这个目录下,有一个 default.conf ,用这个就可以,当然你也可以新建一个去写,这个文件夹下所有的.conf文件都会被 /usr/local/docker/nginx/conf 下面的 nginx.conf 收集起来

我这里就直接去修改 default.conf 了

1
vim default.conf

然后修改后的内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
server {
    listen       80;
    server_name  www.xxx.com;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html last;
    }

    #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;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

被注释掉的不用看,其实重点就是以下内容:

1
2
3
4
5
6
7
8
9
10
server {
    listen       80;
    server_name  www.xxx.com;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html last;
    }
}

这段配置的意思就是,监听80 端口,然后域名是 www.xxx.com ,location里面的 root 就是放 vue 静态文件的路径, 这里要注意一下,这个目录是容器里面的目录, 因为这个配置文件也是对应的容器里面的, 然后 index 就是首页.

下面还有一行 try_files 这个我最开始是没有加的,然后发现打开网页之后刷新就会 404 ,然后网上找到了这种解决方案,具体什么原因可以参考这里

到这里,前端的项目就部署完成了

Spring Boot项目部署

打包部署就不说了,比如我们现在后端项目是8080,然后按照上面说的,后端的接口是 api.xxx.com ,那么就需要nginx去拦截这个域名,然后做一个转发转发到8080 ,实现很简单,在上面的配置文件中,新加一个 server ,内容如下

1
2
3
4
5
6
7
server {
    listen       80;
    server_name  api.xxx.com;
    location / {
        proxy_pass http://ip:8080;
    }
}

加这样一个配置就可以了, 这里要注意,这个ip是要用公网的ip,我开始写成了 127.0.0.1 发现死活访问不到,后来发现原因是nginx用的是docker容器, 所以转发的也是容器里的 127.0.0.1 ,这就坑了,换成公网ip,或者是一个局域网的ip之后就可以了

最后

注意前端vue项目中的请求接口地址要预先改成 api.xxx.com ,也就是后端接口的域名,然后再打包

我也是刚刚接触nginx,查了查资料,勉强能把自己的项目部署上去,之后有时间了再去深入了解