nginx部署vue项目

2021-05-02 大约 2 分钟

本教程的环境是阿里云服务器，请确保你的服务器已经安装了nginx；

# 部署

把自己的vue项目进行打包，
```
npm run build
```
1
打包后会生成一个dist文件夹，里面就是打包生成的文件。
把打包的文件上传到自己的远程服务中。
找到nginx的配置文件，我的路径：/etc/nginx/conf.d/default.conf。

使用vim default.conf,进行如下配置。

[root@iZbp156pkpio44mis76wmxZ conf.d]# cat default.conf 
server {
    listen       8090; # nginx 服务启动监听的端口 默认为：80
    server_name  localhost;

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

    location / {
        root   /home/local/tomcat/webapps_patient/patient; # 我的vue打包后的文件夹目录
        index  index.html index.htm;
    }

    location /api/ {
	 	  rewrite ^/api/(.*) /$1 break; # 过滤掉接口前缀
   		proxy_pass  http://47.114.xxx.71:9091; # 后端接口地址，
    }

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

[root@iZbp156pkpio44mis76wmxZ conf.d]#

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

# 部署中的问题；

由于自己第一次使用nginx来进行部署，我之前用的tomcat，过程中确实遇到了不少坑。

不是把vue静态文件配置好就行了，如果只是访问一下静态文件，而不发网络请求的话，那么就没有什么关系了。

配置完静态文件后，只是页面可以出来了，但是发网络请求(后端接口)就会出现跨域。以下解决；

 # 说明：/api/ 这个前缀是我在vue项目中加的，用来进行匹配，但是实际上后端的接口是没有这个前缀的，所以 用 rewrite 来进行过滤掉 /api 这个前缀。
 location /api/ {
	 	  rewrite ^/api/(.*) /$1 break; # 过滤掉接口前缀
   		proxy_pass  http://47.114.xxx.71:9091; # 后端接口地址，
    }

1
2
3
4
5

如果更改 nginx 服务的端口，记得更新安全组和开放端口防火墙；不然访问不到页面。设置防火墙 (opens new window)

# 启动

# 启动 nginx
service nginx start

# 关闭 nginx
service nginx stop

# 查看 nginx 状态
service nginx status

1
2
3
4
5
6
7
8

nginx部署vue项目

# 部署

# 部署中的问题；

# 启动

详情