Linux安裝nginx及部署Vue項目

部署環境：Ubuntu 20.04 LTS
本地環境：Windows 10

1、下載nginx

使用的版本是：nginx-1.19.4.tar.gz
官網地址：http://nginx.org/en/download.html
百度網盤：
連接: https://pan.baidu.com/s/1RNdH... 提取碼: 7349

2、安裝nginx

1.鏈接服務器

可使用xshell工具鏈接服務器，或者某個命令行工具都行（gitbash，cmd ...）。使用命令行工具執行如下命令鏈接服務器，root是用戶名，8.129.38.87 是你的服務器公網IP，而後輸入密碼便可。

ssh root@8.129.38.87 -p 22

2.配置nginx安裝所需的環境

安裝兩個依賴庫

sudo apt-get install autoconf automake
sudo apt-get install libpcre3 libpcre3-dev

安裝zlib庫

sudo apt-get install openssl
sudo apt-get install libssl-dev

3.將nginx壓縮包上傳到服務器並解壓

在本地打開剛剛下載好的nginx壓縮包所在目錄，打開命令窗口，使用 scp 命令上傳資源，我這裏上傳到服務器的 /usr/local 目錄下，這裏會讓你輸入服務器登陸密碼

scp ./nginx-1.19.4.tar.gz root@8.129.38.87:/usr/local

切換到服務器命令窗口，能夠看到剛剛上傳的壓縮包，執行解壓命令解壓安裝包

cd /usr/local
tar -zxvf nginx-1.19.4.tar.gz

4.執行默認配置

解壓以後，進入解壓後的文件夾，執行 cd nginx-1.19.4
而後進行配置，推薦使用默認配置，直接執行 ./configure 就行了，以下圖所示：

5.編譯安裝nginx

在當前目錄 /usr/local/nginx-1.19.4 進行編譯。輸入 make 按回車便可。若是編譯出錯，請檢查是否前面的4個安裝都沒有問題。

cd /usr/local/nginx-1.19.4
make

編譯成功以後，就能夠安裝了，輸入如下命令：

make install

6.啓動nginx

進入 /usr/local/nginx/sbin 目錄，輸入 ./nginx 便可啓動nginx

cd /usr/local/nginx/sbin
./nginx

若是啓動報錯：nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)，說明80端口被佔用，使用以下命令：

fuser -k 80/tcp

關閉nginx

cd /usr/local/nginx/sbin
./nginx -s quit
# 或者 ./nginx -s stop

重啓nginx

cd /usr/local/nginx/sbin
./nginx -s reload

查看nginx進程

ps aux|grep nginx

7.設置nginx開機啓動

在 rc.local 增長啓動代碼便可

vim /etc/rc.local
# 編輯文件，在文件底部增長 /usr/local/nginx/sbin/nginx 這行內容保存退出

3、部署Vue.js項目

1.打開vue項目，執行打包

npm run build

結束後進入 dist 文件夾，將全部打包結果選中，打包壓縮成 dist.zip

2.將打包結果壓縮包上傳到服務器

scp ./dist.zip root@8.129.38.87:/usr/local/nginx/html

3.解壓縮服務器上的 dist.zip 壓縮包

解壓以前，先將 /usr/local/nginx/html 目錄下的 index.html 刪除掉

cd /usr/local/nginx/html
rm -rf index.html
unzip dist.zip

執行以後如圖

4.修改nginx配置文件

進入 cd /usr/local/nginx/conf 目錄可修改nginx的配置文件：

cd /usr/local/nginx/conf
vim nginx.conf

按鍵盤 i 進行編輯，編輯完成按 Esc 退出編輯，再輸入 :wq 保存並退出

貼上一個完整版的，其中有序號標明的是註釋說明，主要更改了 server 的內容

nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        # 1.監聽 2001 端口
        listen       2001;
        
        # 2.這是你部署的IP，你服務器的公網IP
        server_name  8.129.38.87;

        # 3.這裏配置前端打包文件的映射路徑
        root /usr/local/nginx/html;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        # 4.解決跨域問題，將須要代理的後端地址寫在 proxy_pass 後面
        # 將全部的 http://8.129.38.87:2001/front 請求，轉發到 http://edufront.lagou.com/front
        location /front {
            proxy_pass  http://edufront.lagou.com;
        }
        
        # 5.同理，可配置多個 location ，關於nginx代理的相關配置請自行網上查找
        location /boss {
            proxy_pass  http://eduboss.lagou.com;
            # proxy_redirect off;
            # proxy_set_header Host $host;
            # proxy_set_header X-Real-IP $remote_addr;
            # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

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


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

另外，若是須要配置多個vue項目，只需添加多個 server 配置便可。
把nginx下面的另一個 server 的註釋取消，再進行修改配置便可：

五、在服務器管理臺開放 2001 端口

2001 端口爲咱們剛剛在 nginx.conf 配置文件中監聽的端口
登陸雲服務器管理臺，添加安全組規則

6.重啓nginx

進入 /usr/local/nginx/sbin/ 目錄，執行重啓命令，讓配置生效：

cd /usr/local/nginx/sbin/
./nginx -s reload

查看nginx進程：

ps aux|grep nginx

7.訪問你的網站

在瀏覽器輸入網址 http://8.129.38.87:2001/ 訪問你的網站，這是個人服務器IP加上剛剛配置的端口，記得修改爲你本身的喲~