就在前兩天,有新人通過郵箱問到筆者,如何部署自己的web前端專案?筆者在此詳細介紹。

一、購買雲伺服器

  配置使用者名稱密碼、安全組

二、下載Xshell於Xftp工具

  用於登入伺服器和檔案上傳

三、在linux機器上安裝並配置nginx

  見下文

四、在相關目錄放置自己的專案

  見下文

讓我們一個一個來說,購買伺服器與工具下載就不細說了,做完以後執行Xshell工具,新建一個連線如下圖:

如下圖,出現如下字樣證明連線成功:

接下來是重頭戲,該安裝nginx了,

1:下載nginx壓縮包
可以直接去官網下載,頁可以直接使用wget命令下載,指令如下:

wget -c https://nginx.org/download/nginx-1.20.2.tar.gz

2:安裝nginx依賴的環境

安裝編譯nginx的依賴的gcc、

安裝Nginx的Rewrite模組和HTTP核心模組會使用到PCRE正則表示式語法(pcre負責提供編譯版本的庫、pcre-devel負責提供開發階段的標頭檔案和編譯專案的原始碼)、

安裝zlib庫提供了gzip壓縮演算法、

安裝Open SSL(nginx不僅支援 http協議,還支援 https(即在 ssl 協議上傳輸 http),如果使用了 https,需要安裝 OpenSSL 庫)、

yum install gcc-c++

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

3、解壓nginx壓縮包並安裝

tar -zxvf nginx-1.20.2.tar.gz

4、進入nginx的安裝包路徑

cd nginx-1.20.2

5、執行預設配置(根據自身情況而定)

//不需支援https
./configure

//需要支援https
./configure --with-http_ssl_module

6、編譯ngnix

make

7、安裝nginx

make install

8、尋找nginx啟動目錄(尋找nginx資料夾)

//返回上一層
cd ..

//檢視檔案列表
ll

9、啟動nginx

//進入nginx資料夾
cd /usr/local/nginx/sbin //啟動nginx
./nginx

10、訪問公網ip,有頁面則證明nginx啟動成功

11、附錄nginx其他操作(不用管)

//關閉nginx
./nginx -s quit || ./nginx -s stop //重啟nginx
./nginx -s reload

//驗證是否配置正確
nginx -t

//檢視版本號
nginx -v || nginx -V

//檢視nginx程序
ps aux|grep nginx //設定開機自啟
vim /etc/rc.local
在彈窗底部增加/usr/local/nginx/sbin/nginx

12、啟動Xftp將前端專案上傳到對應目錄(如需更改存放目錄請自行配置nginx.config檔案)

 13、驗證(瀏覽器開啟公網IP,發現已經部署上去了)