前端nginx部署

nginx

如果是在root用户中，无需在前面加sudo

安装
1
2
3
4
# Centos
sudo yum install nginx -y
# Ubuntu
sudo apt-get install nginx

tips: 查找安装位置可以使用

1
whereis nginx

配置

需要注意Vue的路由模式

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
# 这里需要修改
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

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

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       8889;
        listen       [::]:8889;
        server_name  _;
        root         /root/www;
        # 强制转到https
        # rewrite ^(.*)$ https://$host$1 permanent;
        
        # 开启gzip
        gzip on;
        gzip_types text/plain
            application/x-javascript
            application/javascript
            text/css
            application/xml
            text/javascript
            application/x-httpd-php
            image/jpeg
            image/gif
            image/png;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        # 首页
        location / {
            alias /root/www;
            index index.html index.htm;
            # 如果vue的路由是history模式，则需要配置这个，否则刷新会报404
            try_files $uri $uri/ /index.html;
        }

        # 反向代理后端接口，解决跨域的问题
        location /api {
            proxy_pass http://127.0.0.1:8888/api/;
            # 设置body的最大值，默认是1m，比如上传文件时
            client_max_body_size 10m;
            # 设置代理的头信息转发，否则后端接口无法获取到请求的ip，获得的会一直是127.0.0.1
            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;
        }

        error_page 404 /404.html;
        location = /404.html {
        }

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

# 这个是http的配置，需要配置https的证书，其它的同上
# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2;
#        listen       [::]:443 ssl http2;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}
启动
1
sudo systemctl start nginx

重启

修改了配置文件后，需要重启nginx才能生效

1
2
3
4
# 测试nginx文件是否有问题
nginx -t
# 重启
nginx -s reload
JavaScript
#JavaScript
前端nginx部署
https://yifengtingyu.cn/2024/05/15/前端nginx部署/
作者
依风听雨
发布于
2024年5月15日
许可协议