网站部署：使用Nginx部署vue项目到阿里云服务器

最近租了个阿里云的服务器，想使用Nginx把刚做好的网站部署上去

下载Nginx

目前yum已经有了Nginx的源，因此可以直接用yum下载和安装

yum -y install nginx
1

默认的安装位置为/etc/nginx
默认的项目位置为/usr/share/nginx
如果安装失败检查是否安装了zlib prce openssl 以及 gcc
查看是否安装：

rpm -qa | grep openssl
1

安装

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
1

将Vue项目打包好上传到服务器

先在本地打包好生成dist文件夹

npm run build
1

将dist文件夹上传到：/usr/share/nginx/html/

配置Nginx

打开/etc/nginx/nginx.conf文件，按照如下备注的地方修改

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

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 { #主要修改server
        listen       9000;  #你想设置的端口号
        server_name  1.1.1.1; #你的服务器的public地址
        root         /usr/share/nginx/html; #所有项目的根目录，不写也没事

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / { #项目地址
            root   /usr/share/nginx/html/dist/; #项目的根目录
            index  index.html index.htm; #默认访问index时的页面
            try_files $uri /index.html; #
        }
        location /api/ {# 设置跨域反向代理
            rewrite ^.+apis/?(.*)$ /$1 break;  # 重写请求
            proxy_pass http://1.1.1.1:5000;  # 后端服务器地址
        }
         #如果需要配置代理，可以加以下代码
         location /business {
             proxy_pass  http://business.app.com;
        }
         location /user {
              proxy_pass  http://user.app.com;
        }

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

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

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

以上就配置好了Nginx。
接下来启动Nginx，如果之前已经启动了那就重启：这里给一些Nginx的常用命令

start nginx        #启动 Nginx
nginx -s reopen #重启Nginx
nginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginx
nginx -s stop #强制停止Nginx服务
nginx -s quit #优雅地停止Nginx服务（即处理完所有请求后再停止服务）
nginx -V #显示版本和配置选项信息，然后退出
tasklist /fi "imagename eq nginx.exe"     # 查看windows任务管理器下Nginx的进程命令

#或者：
./nginx #启动
./nginx -s stop #关闭
./nginx -s reload #重启
systemctl restart nginx #重启
#启动Nginx并设置开机自动运行
sudo systemctl start nginx.service
sudo systemctl enable nginx.service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

防火墙开放端口

firewall-cmd --zone=public --add-port=9000/tcp --permanent
1

开启之后需要重启防火墙

firewall-cmd --reload
1

查看是否已开：

firewall-cmd --list-ports
1

阿里云加入安全组

只有加入安全组之后外网才能访问这个安全组内的所有端口
实例->安全组->配置规则->手动添加（tcp， 端口号（a到b范围），源0.0.0.0）

加入好安全组之后不需要任何重启就能使用你的项目地址访问到了！