03-部署前端项目

一、部署单个项目

nginx.conf文件默认配置（关键代码）如下：

# user  nobody;
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   html;
            index  index.html index.htm;
        }

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

目录/usr/local/nginx/html是nginx的默认站点目录。
在部署单个项目时，可以直接将你的项目代码放入html目录中（html目录中的文件清空掉），访问nginx默认的80端口即可。
完整链接为：http://+服务器ip

• vue项目打包完后生成dist目录，只需要将dist中的全部内容放到html目录中就可以

注意：此方法不推荐使用，因为不利于后期项目的添加及影响其他同事（比如后端）的正常工作

二、部署多个项目

在一台服务器上使用nginx部署多个前端项目的方法，目前我掌握的有以下三种：
基于location配置
基于端口配置
基于域名配置

这3种方式项目代码的放置位置相同，仅是nginx.conf文件的配置方式不同。
文件放置位置为/usr/local/nginx/html，如下图：

image.png

1、基于location配置

实现方法

修改nginx.conf中的server

    server {
        listen       80;
        server_name  localhost;
        
        # 默认配置
        location / {
            root   html;
            index  index.html index.htm;
        }

        # 额外配置
        # 项目1
        location /bbws {
            alias   /usr/local/nginx/html/bbws/dist; # alias是别名
            index  index.html index.htm;
        }
       
        # 项目2
        location /bbgw {
            alias   /usr/local/nginx/html/bbgw/dist;
            index  index.html index.htm;
        }

        # root与alias主要区别在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。
        # root的处理结果是：root路径 ＋ location路径
        # alias的处理结果是：使用alias路径替换location路径
        # alias是一个目录别名的定义，root则是最上层目录的定义。
        # 还有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件的，而root则可有可无。

        # 注意：使用这种配置方式的话，项目需要在vue.config.js中配置静态资源的打包路径

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

特点

好处：

• 只有一个server，而且我们也不需要配置二级域名。

缺点：

• img、css、js引入需要使用相对路径。

• 如果是vue项目的话，需要在项目的根目录下找到vue.config.js文件(没有的话自己新建一个)，修改公共路径
  修改前：

  
  
  image.png
  
  

  修改为：

const path = require('path');
module.exports = {
    publicPath:'./',    // 公共路径
}

最后重新打包一次，npm run build ，vue3.0打包生产环境资源路径错误问题就解决了。

2、基于端口配置

修改nginx.conf配置文件

# user  nobody;
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   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # 项目1
    server {
        listen       33331;
        server_name  localhost;
        location / {
            root   html/bbws/dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # 项目2
    server {
        listen       33332;
        server_name  localhost;
        location / {
            root   html/bbgw/dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

特点

好处：

• 支持配置多个项目，易于维护

缺点：

• 需要对外开放多个端口

3、基于域名配置（常用）

# user  nobody;
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   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # 项目1
    server {
        listen       33331;
        server_name  ws.bbsw.com;
        location / {
            root   html/bbws/dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # 项目2
    server {
        listen       33331;
        server_name  gw.bbsw.com;
        location / {
            root   html/bbgw/dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

特点

好处：

• 支持配置多个项目，易于维护
• 只需要对外暴露一个端口

4、nginx.conf配置优化

如果所有配置都放到nginx.conf中，这个文件就会比较乱, 也影响管理和阅读。因为nginx 的配置很灵活,支持include配置文件，所以我们可以拆分出来,分成不同的配置文件。
在nginx.conf中通过下面的语句引入：

include /usr/local/nginx/conf/*.conf;

这句话的作用就是可以在nginx启动加载所有 /usr/nginx/conf/ 目录下的 *.conf 文件。 所以，平时我们为了方便管理，可以在此目录下面定义自己的 xx.conf 文件即可。注意，文件类型一定要是conf 。

以3、基于域名配置举例，详细的配置流程如下：
nginx.conf配置：

#user  nobody;
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   html;
            index  index.html index.htm;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    include /usr/local/nginx/conf/*.conf; # 可以在此目录下配置多个.conf文件
}

nginx目录：

image.png

image.png

新增conf文件配置：

# ws.conf文件
# 项目1
server {
    listen       33331;
    server_name  localhost;
    location / {
        root   html/bbws/dist;
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

# gw.conf文件
# 项目2
server {
    listen       33332;
    server_name  localhost;
    location / {
        root   html/bbgw/dist;
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

三、其他

本人也是初学nginx，如果发现有错误，请给予指正。
本文参考：
https://www.cnblogs.com/zhaoxxnbsp/p/12691398.html
https://blog.csdn.net/asahinokawa/article/details/87702491