<li id="c4loq"><acronym id="c4loq"></acronym></li>

<button id="c4loq"></button>
    <dd id="c4loq"><pre id="c4loq"></pre></dd>

      <th id="c4loq"></th>

        <dd id="c4loq"></dd>

        溫馨提示×

        ubuntu中怎么用nginx部署vue項目

        發布時間:2022-02-21 09:27:49 來源:億速云 閱讀:137 作者:iii 欄目:開發技術

        這篇文章主要介紹“ubuntu中怎么用nginx部署vue項目”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“ubuntu中怎么用nginx部署vue項目”文章能幫助大家解決問題。

        1.安裝nginx

        更新源列表

        apt-get update

        安裝nginx

        apt-get install nginx

        檢查nginx是否安裝,輸入如下命令后若出現版本號則安裝成功

        nginx -v

        啟動nginx

        server nginx restart

        在瀏覽器輸入ip地址,若出現如下頁面則啟動成功

        ubuntu中怎么用nginx部署vue項目

        2. 打包上傳vue項目到服務器

        打包

        我的項目使用的是vs code,在終端輸入如下命令進行打包

        npm run build

        上傳

        打包完成后會有dist文件,該文件為打包完成后的項目,該文件中有index.html和static兩個內容。

        將該dist文件上傳到服務器的某個位置即可

        我上傳到/home/ubuntu文件中

        配置nginx

        修改nginx.conf

        安裝nginx后,nginx的默認目錄是/etc/nginx

        在該目錄中有nginx.conf文件,輸入如下命令,使用vi打開該文件

        vi nginx.conf

        我的nginx.conf文件原內容如下

        user www-data;
        worker_processes auto;
        pid /run/nginx.pid;
        include /etc/nginx/modules-enabled/*.conf;
        
        events {
        	worker_connections 768;
        	# multi_accept on;
        }
        
        http {
        
        	##
        	# Basic Settings
        	##
        
        	sendfile on;
        	tcp_nopush on;
        	tcp_nodelay on;
        	keepalive_timeout 65;
        	types_hash_max_size 2048;
        	# server_tokens off;
        
        	# server_names_hash_bucket_size 64;
        	# server_name_in_redirect off;
        
        	include /etc/nginx/mime.types;
        	default_type application/octet-stream;
        
        	##
        	# SSL Settings
        	##
        
        	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        	ssl_prefer_server_ciphers on;
        
        	##
        	# Logging Settings
        	##
        
        	access_log /var/log/nginx/access.log;
        	error_log /var/log/nginx/error.log;
        
        	##
        	# Gzip Settings
        	##
        
        	gzip on;
        
        	# gzip_vary on;
        	# gzip_proxied any;
        	# gzip_comp_level 6;
        	# gzip_buffers 16 8k;
        	# gzip_http_version 1.1;
        	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
        
        	##
        	# Virtual Host Configs
        	##
        
        	include /etc/nginx/conf.d/*.conf;
        	include /etc/nginx/sites-enabled/*;
        }
        
        
        #mail {
        #	# See sample authentication script at:
        #	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
        # 
        #	# auth_http localhost/auth.php;
        #	# pop3_capabilities "TOP" "USER";
        #	# imap_capabilities "IMAP4rev1" "UIDPLUS";
        # 
        #	server {
        #		listen     localhost:110;
        #		protocol   pop3;
        #		proxy      on;
        #	}
        # 
        #	server {
        #		listen     localhost:143;
        #		protocol   imap;
        #		proxy      on;
        #	}
        #}

        在http模塊中加入如下內容,表示配置文件要引用hosts文件夾下的host后綴的文件。該host后綴文件就是用來配置vue項目的,一個host文件配置一個vue項目

        include /etc/nginx/hosts/*.host;

        修改后文件如下

        user www-data;
        worker_processes auto;
        pid /run/nginx.pid;
        include /etc/nginx/modules-enabled/*.conf;
        
        events {
        	worker_connections 768;
        	# multi_accept on;
        }
        
        http {
        
        	##
        	# Basic Settings
        	##
        
        	sendfile on;
        	tcp_nopush on;
        	tcp_nodelay on;
        	keepalive_timeout 65;
        	types_hash_max_size 2048;
        	# server_tokens off;
        
        	# server_names_hash_bucket_size 64;
        	# server_name_in_redirect off;
        
        	include /etc/nginx/mime.types;
        	default_type application/octet-stream;
        
        	##
        	# SSL Settings
        	##
        
        	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        	ssl_prefer_server_ciphers on;
        
        	##
        	# Logging Settings
        	##
        
        	access_log /var/log/nginx/access.log;
        	error_log /var/log/nginx/error.log;
        
        	##
        	# Gzip Settings
        	##
        
        	gzip on;
        
        	# gzip_vary on;
        	# gzip_proxied any;
        	# gzip_comp_level 6;
        	# gzip_buffers 16 8k;
        	# gzip_http_version 1.1;
        	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
        
        	##
        	# Virtual Host Configs
        	##
        
        	include /etc/nginx/conf.d/*.conf;
        	include /etc/nginx/sites-enabled/*;
        	include /etc/nginx/hosts/*.host;#新添加的一行
        }
        
        
        #mail {
        #	# See sample authentication script at:
        #	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
        # 
        #	# auth_http localhost/auth.php;
        #	# pop3_capabilities "TOP" "USER";
        #	# imap_capabilities "IMAP4rev1" "UIDPLUS";
        # 
        #	server {
        #		listen     localhost:110;
        #		protocol   pop3;
        #		proxy      on;
        #	}
        # 
        #	server {
        #		listen     localhost:143;
        #		protocol   imap;
        #		proxy      on;
        #	}
        #}

        創建*.host文件

        在/etc/nginx中創建hosts文件夾

        mkdir hosts

        在host文件中創建syt.host文件,文件名隨便命名

        在文件中添加如下內容

        server {
                listen       8080;#自己設置端口號
                server_name  syt;#自己設置項目名稱
                #access_log  logs/host.access.log  main;
                location / {
                    root   /home/ubuntu/dist;#這里寫vue項目的所在地址
                    index  index.html;#這里是vue項目的首頁,需要保證dist中有index.html文件
                }
        
                error_page   500 502 503 504  /50x.html;#錯誤頁面
            
               
            }

        重啟nginx

        nginx -s reload

        訪問vue項目

        ip:port/index.html即可進行訪問

        常見錯誤

        瀏覽器訪問時顯示403

        這個問題有多種原因,我當時遇到的原因是該項目所在的文件沒有權限訪問。我的項目所在文件是/home/ububtu/dist

        使用如下命令保證可以訪問(比較暴力qaq)

        chmod -R 777 home
        chmod -R 777 ubuntu
        chmod -R 777 dist

        關于“ubuntu中怎么用nginx部署vue項目”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。

        免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

        主題地圖

        黄片免费无马赛克

        <li id="c4loq"><acronym id="c4loq"></acronym></li>

        <button id="c4loq"></button>
        <dd id="c4loq"><pre id="c4loq"></pre></dd>

          <th id="c4loq"></th>

            <dd id="c4loq"></dd>