一.ubuntu安裝nginx

1.更新本地軟件包列表

sudo apt update

2.安裝nginx

sudo apt install nginx

3.驗(yàn)證nginx是否安裝成功

sudo systemctl status nginx

如果Nginx正在運(yùn)行，則命令輸出應(yīng)該顯示Active（active (running)）狀態(tài)。

4.若nginx未運(yùn)行，則輸入命令進(jìn)行啟動

sudo service nginx start

5.查看nginx版本信息

nginx -V

6.瀏覽器輸入ubuntu所在服務(wù)器的ip地址

當(dāng)我們看到如圖所示，即說明nginx安裝成功！

二.vue項(xiàng)目代碼打包

方式一: 在vscode的終端輸入

npm run build

方式二: 點(diǎn)擊如圖的紅色方形部分的npm腳本進(jìn)行項(xiàng)目代碼打包

打包成功,則終端輸出信息如下

當(dāng)前目錄下生成的dist文件夾就是打包好的vue項(xiàng)目代碼

三.ubuntu修改nginx配置文件

nginx是依賴于其配置文件進(jìn)行工作的,其配置文件路徑是/etc/nginx/nginx.conf

使用下面的命令來查看默認(rèn)配置文件

cat /etc/nginx/nginx.conf

如果你不想看到注釋和空白，可以使用以下命令只顯示具體內(nèi)容

cat /etc/nginx/nginx.conf | grep -vE "#|^$"

接下來我將每行進(jìn)行注釋(注釋以#開頭):

user www-data;                        # 運(yùn)行 Nginx 的用戶
worker_processes auto;                # 自動設(shè)置 worker 進(jìn)程數(shù)為 CPU 核心數(shù)
pid /run/nginx.pid;                   # Nginx 的 PID 文件路徑
include /etc/nginx/modules-enabled/*.conf;  # 包含模塊配置文件
events {                              # 事件處理模塊的配置
        worker_connections 768;       # 每個 worker 進(jìn)程的最大連接數(shù)
}
http {                                # HTTP 核心模塊的配置
        sendfile on;                  # 開啟 sendfile 功能
        tcp_nopush on;                # 開啟 tcp_nopush 功能
        types_hash_max_size 2048;     # 設(shè)置 types_hash_max_size 參數(shù)的值
        include /etc/nginx/mime.types; # 包含 MIME 類型定義文件
        default_type application/octet-stream; # 默認(rèn) MIME 類型
        ssl_prefer_server_ciphers on; # 開啟 SSL/TLS 功能
        access_log /var/log/nginx/access.log; # 訪問日志文件路徑
        error_log /var/log/nginx/error.log;   # 錯誤日志文件路徑
        gzip on;                      # 開啟 Gzip 壓縮
        include /etc/nginx/conf.d/*.conf;    # 包含其他配置文件
        include /etc/nginx/sites-enabled/*;  # 包含虛擬主機(jī)配置文件
}

這里，我們只需要了解其中重要的3個部分:

• 第1行的 www-data 是運(yùn)行nginx的用戶，后面我們需要把該用戶加入當(dāng)前ubuntu用戶所屬組，保證www-data有足夠權(quán)限訪問當(dāng)前ubuntu用戶目錄下的前端文件(因?yàn)楸救耸前亚岸宋募穆窂教砑釉诋?dāng)前ubuntu用戶目錄下的)。
   

• 倒數(shù)第3行的 include /etc/nginx/conf.d/*.conf;可以理解為把路徑/etc/nginx/conf.d下的所有以.conf結(jié)尾的文件都復(fù)制到這里，而路徑/etc/nginx/conf.d下的所有文件代表虛擬主機(jī)配置文件。
   

• 倒數(shù)第2行的 include /etc/nginx/sites-enabled/*;可以理解為把路徑/etc/nginx/sites-enabled下的所有文件復(fù)制到這里，當(dāng)我們進(jìn)入目錄/etc/nginx/sites-enabled下,會發(fā)現(xiàn)只有default一個文件。
  
  總結(jié)一下，當(dāng)nginx運(yùn)行的時候，會加載配置文件/etc/nginx/nginx.conf,而這個配置文件里面包含了目錄/etc/nginx/sites-enabled下的所有文件(即文件default)
  這時可以參考之前查看 nginx.conf 的方式來查看default文件：

  cd /etc/nginx/sites-enabled
  

  cat ./default | grep -vE "#|^$"
  

  default文件內(nèi)容如下:

  

  文件中的配置信息進(jìn)行注釋,(以 # 開頭)

   # 虛擬主機(jī)的配置
   server {
     # 偵聽 80 端口，分別配置了 IPv4 和 IPv6
     listen 80 default_server;
     listen [::]:80 default_server;
  
     # 定義服務(wù)器的默認(rèn)網(wǎng)站根目錄位置
     root /var/www/html;
  
     # 定義主頁的文件名
     index index.html index.htm index.nginx-debian.html;
  
     # 定義虛擬服務(wù)器的名稱
     server_name _;
  
     # location 塊
     location / {
       try_files $uri $uri/ =404;
     }
   }
  

  當(dāng)我們在瀏覽器訪問網(wǎng)站的時候是默認(rèn)80端口的，如果我們需要在其他端口訪問網(wǎng)站，例如8080端口，則需要修改listen 80 為listen 8080,則訪問網(wǎng)站的時候需要在ip地址后面加上:8080。

  如果我們想更改網(wǎng)站文件存放的路徑，直接修改 root 的路徑就可以了

四.部署前端代碼

理解上面內(nèi)容后，我們可以開始部署前端文件了。一般情況下，我們是不會去修改nginx原有的配置文件內(nèi)容,而是另外添加一些關(guān)鍵的文件，使得nginx在運(yùn)行的時候順帶執(zhí)行咱們添加的文件來完成相應(yīng)的功能。

1.進(jìn)入目錄/etc/nginx/sites-enabled,創(chuàng)建文件myweb.conf,名字可以任意取，但是必須以.conf結(jié)尾

cd  /etc/nginx/sites-enabled

sudo touch myweb.conf

把以下內(nèi)容添加到myweb.conf文件里面：

server {
   listen 8070 default_server; #可以把8070修改為你需要設(shè)置的端口號

   root /home/ubuntu/project/dist; #你的前端文件存放的路徑地址

   index index.html index.htm;  #保證你的dist文件夾下面有個文件叫做index.html

   server_name localhost;  #這里的localhost替換為你自己的ubuntu所在ip地址
ubuntu
   location / {
       try_files $uri $uri/ =404;
   }
}

根據(jù)自己的情況進(jìn)行以下修改：

• listen 8070 default_server;這里的8070可以修改為你需要設(shè)置的端口號
• root /home/ubuntu/project/dist;這里的/home/ubuntu/project/dist可以修改為你存放前端代碼的具體路徑，建議在當(dāng)前ubuntu用戶目錄下新建一個project文件夾，把之前打包好的前端代碼文件夾dist放在這里
• server_name localhost;這里的localhost替換為你自己的ubuntu所在的ip地址

總結(jié)一下，我們?yōu)槭裁匆砑觤yweb.conf在目錄/etc/nginx/sites-enabled下，因?yàn)橹坝兄v過nginx運(yùn)行的時候是要加載目錄/etc/nginx/sites-enabled下的所有文件，這樣當(dāng)然也就順便把文件myweb.conf加載啦，而myweb.conf文件存放的是我們部署的前端代碼文件的一些信息，這樣nginx就能加載到咱們的前端代碼啦。

2.上傳打包好的前端代碼文件夾dist到當(dāng)前ubuntu用戶所在的目錄下，如/home/ubuntu/project,該目錄需要根據(jù)自己的情況進(jìn)行相應(yīng)的修改，需要保證與myweb.conf文件下的root行所在的路徑一致即可。

3.把nginx用戶www-data添加到當(dāng)前ubuntu的用戶所屬組:使用命令groups查看當(dāng)前用戶所屬組，例如

可以看到紅色方框即為當(dāng)前用戶所屬組，接著使用命令把用戶www-data添加到當(dāng)前用戶組ubuntu

sudo usermod -a -G ubuntu www-data

該命令根據(jù)自己實(shí)際情況進(jìn)行修改。

我們可以查看當(dāng)前用戶組的所有用戶，判斷是否添加成功：

getent group ubuntu

可以看到，我們添加成功了，這樣nginx用戶就有權(quán)限訪問到咱們的前端代碼啦！

4.在ubuntu所在的云服務(wù)器或者虛擬機(jī)添加防火墻規(guī)則，允許訪問8070端口:

我這里使用的是云服務(wù)器，因此需要添加防火墻規(guī)則

5.在瀏覽器輸入ip地址:8070即可訪問到前端界面啦！

總結(jié)

到此這篇關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的文章就介紹到這了,更多相關(guān)Ubuntu用nginx部署vue項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論