前端將項(xiàng)目部署到服務(wù)器(Nginx)的完整步驟
更新時(shí)間：2023年01月12日 10:20:40 作者：lethe_R
最近寫了一個(gè)項(xiàng)目,需要進(jìn)行手機(jī)上測(cè)試,下面就需要前端自己將項(xiàng)目進(jìn)行部署,這篇文章主要給大家介紹了關(guān)于前端將項(xiàng)目部署到服務(wù)器(Nginx)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
我們?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 root
user 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;
#pid logs/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;
sendfile on; #開啟高效文件傳輸模式
#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;
# 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;
# }
#}
# 測(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Nginx端口映射配置方法和多端口映射，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Ubuntu中Nginx虛擬主機(jī)設(shè)置的項(xiàng)目實(shí)踐
通過配置虛擬主機(jī),可以在同一臺(tái)服務(wù)器上運(yùn)行多個(gè)獨(dú)立的網(wǎng)站,本文主要介紹了Ubuntu中Nginx虛擬主機(jī)設(shè)置的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2025-03-03
Linux部署Nginx實(shí)現(xiàn)反向代理的方法步驟
Nginx 是一種常用、輕型且快速的 Web 服務(wù)器, 它可以在 Linux 和 Windows 上運(yùn)行,并且可以配置為反向代理服務(wù)器,本文主要介紹了Linux部署Nginx實(shí)現(xiàn)反向代理的方法步驟,感興趣的可以了解一下2023-08-08
本文給大家匯總介紹了nginx中使用rewrite偽靜態(tài)正則表達(dá)式的資源，非常的全面詳細(xì)，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了nginx常用配置conf，包括配置vue項(xiàng)目，配置接口代理的代碼詳解，代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
Nginx默認(rèn)會(huì)將連字符轉(zhuǎn)換為下劃線,這可能會(huì)導(dǎo)致無法正確獲取到原始的請(qǐng)求頭值,本文主要介紹了nginx無法獲取帶下劃線的header值的問題解決,感興趣的可以了解一下2024-12-12
Nginx (engine x) 是一個(gè)高性能的HTTP和反向代理服務(wù)器,也是一個(gè)IMAP/POP3/SMTP服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于nginx安裝以及配置的詳細(xì)過程,文章將實(shí)現(xiàn)的過程介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
nginx 的 default_server 指令可以定義默認(rèn)的 server 出處理一些沒有成功匹配 server_name 的請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于Nginx中default_server指令問題的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了淺談nginx反向代理中神奇的斜線，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
windows下快速安裝nginx并配置開機(jī)自啟動(dòng)的方法
這篇文章主要介紹了windows下快速安裝nginx 并配置開機(jī)自啟動(dòng)的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-05-05