jlzzjlzz亚洲乱熟在线播放

系統城裝機大師 - 唯一官網:www.farandoo.com!

當前位置:首頁 > server > anz > 詳細頁面

服務器使用Nginx部署Vue項目教程圖解

時間:2022-04-15來源:www.farandoo.com作者:電腦系統城

目錄
  • 一、安裝Nginx
  • 二、部署vue

首先得購買個服務器,在這就不教怎么購買了,本文章使用的是阿里云輕量級服務器CentOS7.6

一、安裝Nginx

1. 使用XShell連接我們的服務器

2. 配置 EPEL源

1
2
sudo yum install -y epel-release
sudo yum -y update

3. 安裝Nginx

1 sudo yum install -y nginx

以下的內容需要記住,特別是配置文件
安裝成功后,默認的網站目錄為: /usr/share/nginx/html
默認的配置文件為:/etc/nginx/nginx.conf

4. 開啟端口80和443

前提是要先打開防火墻

1 systemctl start firewalld.service

重啟防火墻:firewall-cmd --reload
查看防火墻狀態firewall-cmd --state
關閉防火墻systemctl stop firewalld.service
開啟端口firewall-cmd --add-port=8890/tcp --permanent (8890替換為要開啟的那個端口)
開啟80和443firewall-cmd --permanent --zone=public --add-service=httpfirewall-cmd --permanent --zone=public --add-service=https
開啟后要記得重啟防火墻 5. 服務器開啟80和443端口號

打開服務器,點擊防火墻,然后點擊添加規則

在這里插入圖片描述

在端口范圍那里添加我們需要的就行了,這里我們就添加80和443

在這里插入圖片描述

6. Nginx 基本命令

啟動:systemctl start nginx
重啟:systemctl restart nginx
關閉:systemctl stop nginx
查看狀態:systemctl status nginx
開啟開機自動啟動:systemctl enable nginx
關閉開機自動啟動:systemctl disable nginx

7. 驗證是否安裝成功

在電腦瀏覽器輸入服務器的ip地址,出現歡迎到nginx就代表成功了,那么就可以下一步了

在這里插入圖片描述

二、部署vue

1. 打包vue項目

1 npm run build // 這個看情況 如果是版本那么就根據情況

2. 上傳到服務器

我們這里是把這個放到了 /usr/local/webapp這個文件夾里面
我們可以使用xftp進行上傳

在這里插入圖片描述

3. nginx配置

執行 vim /etc/nginx/nginx.conf命令 進入配置文件

在這里插入圖片描述

這樣我們的vue就部署完成了
記得重啟一下nginx

4. 測試

在瀏覽器輸入我們服務器的ip地址加上端口號就可以了

在這里插入圖片描述

如果是其他端口那么就要考慮服務器和阿里云有沒有開放該端口號

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

分享到:

相關信息

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載