目錄

• 一、準(zhǔn)備環(huán)境
• 二、安裝Nginx
• 1、 安裝Nginx依賴
• 2、下載Nginx
• 3、解壓下載好的Nginx 壓縮包
• 4、編譯安裝Nginx
• 5、啟動(dòng)Nginx服務(wù)
• 三、操作步驟
• 1、使用Xshell連接服務(wù)器
• 2、上傳靜態(tài)資源文件
• 3、 配置Nginx
• 4、 重啟Nginx服務(wù)
• 總結(jié)

我們?cè)跁?huì)開發(fā)項(xiàng)目的同時(shí)，也應(yīng)該了解一下前端是如何部署項(xiàng)目的；

一、準(zhǔn)備環(huán)境

1、服務(wù)器或者虛擬機(jī)（后端已經(jīng)搭建好的，這里就不講述如何搭建服務(wù)器了）
2、Xshell 和 Xftp --> 存放靜態(tài)文件和操作服務(wù)器
3、Windows系統(tǒng)
Xshell：是一個(gè)強(qiáng)大的安全終端模擬軟件，可以在Windows界面下用來訪問遠(yuǎn)端不同系統(tǒng)下的服務(wù)器。（作用就是用來連接遠(yuǎn)程服務(wù)器的）
Xftp：是一個(gè)功能強(qiáng)大的SFTP、FTP 文件傳輸軟件。（作用是存放靜態(tài)文件和上傳靜態(tài)資源）

二、安裝Nginx

使用Xshell連接服務(wù)器，既然想要在服務(wù)器上面放靜態(tài)資源，像HTML，js等，就需要安裝靜態(tài)資源服務(wù)器。靜態(tài)資源服務(wù)器有Apache和Nginx，這里我們選用nginx。

1、 安裝Nginx依賴

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install gcc-c++

yum install -y openssl openssl-devel

2、下載Nginx

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

3、解壓下載好的Nginx 壓縮包

找到安裝包Nginx安裝路徑，并在目錄下進(jìn)行解壓。

tar -zxvf nginx-0.1.18.tar.gz

進(jìn)入解壓好的Nginx目錄下：

cd nginx-0.1.18

4、編譯安裝Nginx

./configure --with-http_ssl_module

make

make install

5、啟動(dòng)Nginx服務(wù)

找到安裝目錄：

whereis nginx

啟動(dòng)服務(wù)：

/usr/local/nginx/sbin/nginx

或者進(jìn)入Nginx目錄下啟動(dòng)：

./nginx

三、操作步驟

1、使用Xshell連接服務(wù)器

輸入服務(wù)器名稱、地址、端口號(hào)，連接成功后會(huì)讓你輸入賬號(hào)和密碼，賬號(hào)一般是默認(rèn)的root。

在Xshell中啟動(dòng)Nginx：

1、查找安裝的路徑：whereis nginx;
2、執(zhí)行Nginx啟動(dòng)命令：/usr/local/nginx/sbin/nginx；
3、查看服務(wù)運(yùn)行狀態(tài)：ps -ef | grep nginx；
4、停止服務(wù)：kill 進(jìn)程號(hào)； /usr/local/nginx/sbin/nginx -stop
5、重啟服務(wù)：/usr/local/nginx/sbin/nginx -s reopen

2、上傳靜態(tài)資源文件

連接Xftp，進(jìn)行文件傳輸。服務(wù)器的根目錄是 /root ，這里可以創(chuàng)建一個(gè)自己的項(xiàng)目文件目錄進(jìn)行靜態(tài)資源文件的存放。直接把打包后的dist文件放在目標(biāo)目錄即可。

3、 配置Nginx

在Xhell中進(jìn)行Nginx的配置：

配置命令：vim /usr/local/nginx/conf/nginx.conf(vim + nginx目錄)

按insert鍵進(jìn)入編輯模式，說明以及配置文件如下：

#全局塊 ：配置影響nginx全局的指令。一般有運(yùn)行nginx服務(wù)器的用戶組，nginx進(jìn)程pid存放路徑，日志存放路徑，配置文件引入，允許生成worker process數(shù)等。#user  nobody/root; #配置用戶或者組，默認(rèn)為nobody rootuser root;worker_processes  1;  #允許生成的進(jìn)程數(shù)，默認(rèn)是1#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  info;#pidlogs/nginx.pid; #指定nginx進(jìn)程運(yùn)行文件存放地址events {  #event塊：配置影響nginx服務(wù)器或與用戶的網(wǎng)絡(luò)連接。有每個(gè)進(jìn)程的最大連接數(shù)，選取哪種事件驅(qū)動(dòng)模型處理連接請(qǐng)求，是否允許同時(shí)接受多個(gè)網(wǎng)路連接，開啟多個(gè)網(wǎng)絡(luò)連接序列化等。    accept_mutex on;   #設(shè)置網(wǎng)路連接序列化，防止驚群現(xiàn)象發(fā)生，默認(rèn)為on    multi_accept on;  #設(shè)置一個(gè)進(jìn)程是否同時(shí)接受多個(gè)網(wǎng)絡(luò)連接，默認(rèn)為off    #use epoll;      #事件驅(qū)動(dòng)模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport    worker_connections  1024;    #最大連接數(shù)，默認(rèn)為512}http { #http塊：可以嵌套多個(gè)server，配置代理，緩存，日志定義等絕大多數(shù)功能和第三方模塊的配置。如文件引入，mime-type定義，日志自定義，是否使用sendfile傳輸文件，連接超時(shí)時(shí)間，單連接請(qǐng)求數(shù)等。    include       mime.types; #文件擴(kuò)展名與文件類型映射表    default_type  application/octet-stream;  #默認(rèn)文件類型，默認(rèn)為text/plain、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;    sendfileon; #開啟高效文件傳輸模式    #tcp_nopush     on;    #keepalive_timeout  0;    keepalive_timeout  65;#保持請(qǐng)求活躍時(shí)間    #gzip  on;	#error_page 404 https://www.baidu.com; #錯(cuò)誤頁		#http全局塊    server {  #server塊：配置虛擬主機(jī)的相關(guān)參數(shù)，一個(gè)http中可以有多個(gè)server。		keepalive_requests 120; #單連接請(qǐng)求上限次數(shù)。listen       80; #監(jiān)聽端口server_name  127.0.0.1;#監(jiān)聽地址-->設(shè)置對(duì)應(yīng)監(jiān)聽的域名xxx.com  www.baidu.com#charset koi8-r;#access_log  logs/host.access.log  main;				#請(qǐng)求的url過濾，正則匹配，~為區(qū)分大小寫，~*為不區(qū)分大小寫。location / { #location塊：配置請(qǐng)求的路由，以及各種頁面的處理情況。			#root path;  #根目錄			#index vv.txt;  #設(shè)置默認(rèn)頁    root   html;    index  index.html index.htm;			#proxy_pass  http://mysvr;  #請(qǐng)求轉(zhuǎn)向mysvr 定義的服務(wù)器列表-->可以填寫自己的服務(wù)器地址			#proxy_read_timeout 150; 代理連接超時(shí)時(shí)間			#deny 127.0.0.1;  #拒絕的ip			#allow 172.18.5.54; #允許的ip }#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;#    includefastcgi_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;    #    }    #} # 測(cè)試配置    server {listen       8777;server_name  http://127.0.0.1/;gzip on; # 開啟Gzip# gzip_static on; # 開啟靜態(tài)文件壓縮 這句話不要gzip_min_length  1k; # 不壓縮臨界值，大于1K的才壓縮gzip_buffers     4 16k;gzip_comp_level 5;gzip_types     application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd-php text/plain text/javascript text/css image/jpeg image/gif image/png; # 進(jìn)行壓縮的文件類型gzip_http_version 1.1;gzip_vary on;gzip_proxied   expired no-cache no-store private auth;gzip_disable   "MSIE [1-6]\.";location / {    root   /home/myProject/dist; # root表示根目錄，這里的路徑需要與Xftp上傳的靜態(tài)資源文件的路徑一致    index  index.html index.htm;    try_files $uri $uri/ /index.html;}location @router {    rewrite ^.*$ /index.html last;}    }}

修改完成后：wq 保存退出。

4、 重啟Nginx服務(wù)

重啟命令：/usr/local/nginx/sbin/nginx -s reopen

最后在瀏覽器中輸入：http://127.0.0.1:8777/即可訪問部署成功的項(xiàng)目；

總結(jié)

到此這篇關(guān)于前端將項(xiàng)目部署到服務(wù)器(Nginx)的文章就介紹到這了,更多相關(guān)前端項(xiàng)目部署到Nginx服務(wù)器內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！