nginx部署vue項目

本文轉載自查看原文 2021-01-03 16:40 1358 nginx

1、安裝配置nginx(Aliyun linux)

概述： Nginx是一款輕量級的網頁服務器、反向代理服務器。相較於Apache、lighttpd具有占有內存少，穩定性高等優勢。它最常的用途是提供反向代理服務。

2、安裝；

Nginx的安裝依賴於以下三個包，意思就是在安裝Nginx之前首先必須安裝一下的三個包，注意安裝順序如下：
- SSL功能需要openssl庫，直接通過yum安裝:
```
yum install openssl
```
- gzip模塊需要zlib庫，直接通過yum安裝:
```
yum install zlib
```
- rewrite模塊需要pcre庫，直接通過yum安裝:
```
 yum install pcre
```

安裝Nginx依賴項和Nginx

使用yum安裝nginx需要包括Nginx的庫，安裝Nginx的庫

rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

使用下面命令安裝nginx
```
yum install nginx
```

啟動Nginx

service nginx start

Redirecting to /bin/systemctl start nginx.service

測試；出現先面這樣就說明成功了。

[root@iZbp156pkpio44mis76wmxZ /]# curl localhost
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>
[root@iZbp156pkpio44mis76wmxZ /]#

安裝Nginx后，安裝在了 /etc/nginx/目錄下，你可以打開/etc/nginx/conf.d/default.conf查看里面的配置，包括監聽端口，域名和nginx訪問的根目錄.

[root@iZbp156pkpio44mis76wmxZ conf.d]# cat default.conf
server {
    listen       80;
    server_name  localhost;

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

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

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

3、部署；

把自己的vue項目進行打包，
```
npm run build
```
打包后會生成一個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]#

4、部署中的問題；

由於自己第一次使用nginx來進行部署，我之前用的tomcat，過程中確實遇到了不少坑。

不是把vue靜態文件配置好就行了，如果只是訪問一下靜態文件，而不發網絡請求的話，那么就沒有什么關系了。

配置完靜態文件后，只是頁面可以出來了，但是發網絡請求(后端接口)就會出現跨域。以下解決；

 # 說明：/api/ 這個前綴是我在vue項目中加的，用來進行匹配，但是實際上后端的接口是沒有這個前綴的，所以 用 rewrite 來進行過濾掉 /api 這個前綴。
 location /api/ {
	 	  rewrite ^/api/(.*) /$1 break; # 過濾掉接口前綴
   		proxy_pass  http://47.114.xxx.71:9091; # 后端接口地址，
    }

如果更改 nginx 服務的端口，記得更新安全組和開放端口防火牆；不然訪問不到頁面。設置防火牆

5、命令啟動；

# 啟動 nginx
service nginx start

# 關閉 nginx
service nginx stop

# 查看 nginx 狀態
service nginx status

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Nginx部署vue項目 nginx部署vue項目 nginx部署vue項目 vue項目通過nginx部署 Nginx部署vue項目 Nginx部署vue項目 nginx部署VUE項目 vue 項目部署到nginx nginx下部署vue項目 nginx部署多個vue項目