欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端將項目部署到服務器(Nginx)的完整步驟

 更新時間:2023年01月12日 10:20:40   作者:lethe_R  
最近寫了一個項目,需要進行手機上測試,下面就需要前端自己將項目進行部署,這篇文章主要給大家介紹了關于前端將項目部署到服務器(Nginx)的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

我們在會開發(fā)項目的同時,也應該了解一下前端是如何部署項目的;

一、準備環(huán)境

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

二、安裝Nginx

使用Xshell連接服務器,既然想要在服務器上面放靜態(tài)資源,像HTML,js等,就需要安裝靜態(tài)資源服務器。靜態(tài)資源服務器有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安裝路徑,并在目錄下進行解壓。

tar -zxvf nginx-0.1.18.tar.gz

進入解壓好的Nginx目錄下:

cd nginx-0.1.18

4、編譯安裝Nginx

./configure --with-http_ssl_module
make
make install

5、啟動Nginx服務

找到安裝目錄:

whereis nginx

啟動服務:

/usr/local/nginx/sbin/nginx

或者進入Nginx目錄下啟動:

./nginx

三、操作步驟

1、使用Xshell連接服務器

輸入服務器名稱、地址、端口號,連接成功后會讓你輸入賬號和密碼,賬號一般是默認的root。

在Xshell中啟動Nginx:

1、查找安裝的路徑:whereis nginx;
2、執(zhí)行Nginx啟動命令:/usr/local/nginx/sbin/nginx;
3、查看服務運行狀態(tài):ps -ef | grep nginx;
4、停止服務:kill 進程號; /usr/local/nginx/sbin/nginx -stop
5、重啟服務:/usr/local/nginx/sbin/nginx -s reopen

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

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

3、 配置Nginx

在Xhell中進行Nginx的配置:

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

按insert鍵進入編輯模式,說明以及配置文件如下:

#全局塊 :配置影響nginx全局的指令。一般有運行nginx服務器的用戶組,nginx進程pid存放路徑,日志存放路徑,配置文件引入,允許生成worker process數(shù)等。
#user  nobody/root; #配置用戶或者組,默認為nobody root
user root;
worker_processes  1;  #允許生成的進程數(shù),默認是1

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

#pid        logs/nginx.pid; #指定nginx進程運行文件存放地址


events {  #event塊:配置影響nginx服務器或與用戶的網(wǎng)絡連接。有每個進程的最大連接數(shù),選取哪種事件驅動模型處理連接請求,是否允許同時接受多個網(wǎng)路連接,開啟多個網(wǎng)絡連接序列化等。
    accept_mutex on;   #設置網(wǎng)路連接序列化,防止驚群現(xiàn)象發(fā)生,默認為on
    multi_accept on;  #設置一個進程是否同時接受多個網(wǎng)絡連接,默認為off
    #use epoll;      #事件驅動模型,select|poll|kqueue|epoll|resig|/dev/poll|eventport
    worker_connections  1024;    #最大連接數(shù),默認為512
}


http { #http塊:可以嵌套多個server,配置代理,緩存,日志定義等絕大多數(shù)功能和第三方模塊的配置。如文件引入,mime-type定義,日志自定義,是否使用sendfile傳輸文件,連接超時時間,單連接請求數(shù)等。
    include       mime.types; #文件擴展名與文件類型映射表
    default_type  application/octet-stream;  #默認文件類型,默認為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;#保持請求活躍時間

    #gzip  on;
	#error_page 404 https://www.baidu.com; #錯誤頁
	
	#http全局塊
    server {  #server塊:配置虛擬主機的相關參數(shù),一個http中可以有多個server。
		keepalive_requests 120; #單連接請求上限次數(shù)。
        listen       80; #監(jiān)聽端口
        server_name  127.0.0.1;#監(jiān)聽地址-->設置對應監(jiān)聽的域名xxx.com  www.baidu.com

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		#請求的url過濾,正則匹配,~為區(qū)分大小寫,~*為不區(qū)分大小寫。
        location / { #location塊:配置請求的路由,以及各種頁面的處理情況。
			#root path;  #根目錄
			#index vv.txt;  #設置默認頁
            root   html;
            index  index.html index.htm;
			#proxy_pass  http://mysvr;  #請求轉向mysvr 定義的服務器列表-->可以填寫自己的服務器地址
			#proxy_read_timeout 150; 代理連接超時時間
			#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;
    #    }
    #}
 # 測試配置
    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; # 進行壓縮的文件類型
        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服務

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

最后在瀏覽器中輸入:http://127.0.0.1:8777/即可訪問部署成功的項目;

總結 

到此這篇關于前端將項目部署到服務器(Nginx)的文章就介紹到這了,更多相關前端項目部署到Nginx服務器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 使用Nginx進行URL轉發(fā)的配置案例

    使用Nginx進行URL轉發(fā)的配置案例

    Nginx是一個高性能的Web服務器和反向代理服務器,它還可以用于URL轉發(fā),在本教學文章中,我們將從安裝Nginx開始,逐步介紹配置步驟,并展示一個URL轉發(fā)的案例,感興趣的朋友可以參考下
    2023-09-09
  • nginx?80端口配置多個location無效訪問404問題

    nginx?80端口配置多個location無效訪問404問題

    這篇文章主要介紹了nginx?80端口配置多個location無效訪問404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • Nginx服務狀態(tài)監(jiān)控的方法

    Nginx服務狀態(tài)監(jiān)控的方法

    這篇文章主要介紹了Nginx服務狀態(tài)監(jiān)控的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • Nginx動靜分離配置實現(xiàn)與說明

    Nginx動靜分離配置實現(xiàn)與說明

    這篇文章主要介紹了Nginx動靜分離配置實現(xiàn)與說明,需要的朋友可以參考下
    2022-04-04
  • 解決使用了nginx獲取IP地址都是127.0.0.1 的問題

    解決使用了nginx獲取IP地址都是127.0.0.1 的問題

    這篇文章主要介紹了解決使用了nginx獲取IP地址都是127.0.0.1 的問題,獲取i工具的完整代碼文中給大家提到,具體實例代碼跟隨小編一起看看吧
    2021-09-09
  • Nginx服務器中設置禁止訪問文件或目錄的方法

    Nginx服務器中設置禁止訪問文件或目錄的方法

    這篇文章主要介紹了Nginx服務器中設置禁止訪問文件或目錄的方法,對于協(xié)同遠程管理服務器的情況來講很有實用性,需要的朋友可以參考下
    2015-07-07
  • Nginx 中文域名配置詳解及實現(xiàn)

    Nginx 中文域名配置詳解及實現(xiàn)

    這篇文章主要介紹了Nginx中 文域名配置詳解及實現(xiàn)的相關資料,Nginx虛擬主機上綁定一個帶中文域名但是不能跳轉,這里給大家說下如何實現(xiàn),需要的朋友可以參考下
    2016-12-12
  • Nginx靜態(tài)資源或者路徑鑒權方式

    Nginx靜態(tài)資源或者路徑鑒權方式

    這篇文章主要介紹了Nginx靜態(tài)資源或者路徑鑒權方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • nginx的location配置導致網(wǎng)關返回404問題

    nginx的location配置導致網(wǎng)關返回404問題

    這篇文章主要介紹了nginx的location配置導致網(wǎng)關返回404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • Nginx鑒權、限流問題

    Nginx鑒權、限流問題

    這篇文章主要介紹了Nginx鑒權、限流問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06

最新評論