前言:昨天在搗鼓自己在uniapp寫的H5項目部署,也看了網上很多亂七八糟的文章方法,大多都是複製粘貼,感覺有點亂,寫得又很麻煩…所以自己動手記錄一下,也希望能夠幫到各位。
服務器是阿里雲+nginx,本篇介紹一下如何部署nginx。
(原生vue-cli項目也是同理,運行完npm run build命令後就可以把dist目錄按照本篇的部署步驟進行部署)
本篇重要步驟:
一、安裝nginx服務
各位看官也可以參考一下菜鳥教程 Nginx 安裝配置;寫的比較詳細,也很簡單,跟着來就行了。
以下簡單講講我的安裝過程,圖就不放了:
1.安裝nginx的環境
yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel
2.安裝 PCRE
1、下載 PCRE 安裝包,下載地址: http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
[root@bogon src]# cd /usr/local/src/
[root@bogon src]# wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz
2、解壓安裝包:
[root@bogon src]# tar zxvf pcre-8.35.tar.gz
3、進入安裝包目錄
[root@bogon src]# cd pcre-8.35
4、編譯安裝
[root@bogon pcre-8.35]# ./configure
[root@bogon pcre-8.35]# make && make install
5、查看pcre版本(可以查看到版本號及代表安裝pcre成功)
[root@bogon pcre-8.35]# pcre-config --version
3.安裝 Nginx
1、下載 Nginx,下載地址:http://nginx.org/download/nginx-1.6.2.tar.gz
[root@bogon src]# cd /usr/local/src/
[root@bogon src]# wget http://nginx.org/download/nginx-1.6.2.tar.gz
2、解壓安裝包:
[root@bogon src]# tar zxvf nginx-1.6.2.tar.gz
3、進入安裝包目錄
[root@bogon src]# cd nginx-1.6.2
4、編譯安裝
[root@bogon nginx-1.6.2]# ./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35
[root@bogon nginx-1.6.2]# make
[root@bogon nginx-1.6.2]# make install
5、查看nginx版本(可以查看到版本號及代表安裝nginx成功)
[root@bogon nginx-1.6.2]# /usr/local/webserver/nginx/sbin/nginx -v
到這裏nginx服務就安裝成功了,跟着打命令就行了,特別簡單。
4.啓動 Nginx
[root@bogon conf]# /usr/local/webserver/nginx/sbin/nginx
輸入服務器地址+80端口,看到如下頁面,安裝成功了,恭喜你!
二、uni-app打包h5項目
1.配置發佈文件
2.點擊發布按鈕
1.點擊發行
2.填入打包信息
直接寫www.xxx.com 或者 1x.xxx.xxx就行
3.等待打包成功
可以看到打包成功後的地址如下:
三、上傳項目到阿里雲服務器
1.用xshell連接服務器
2.用xftp連接上傳
這裏我上傳到了nginx文件夾的根目錄下
(記住這個位置 待會配置nginx.conf要用)
四、nginx配置
1.輸入命令查看初始配置文件
[root@bogon conf]# cat /usr/local/webserver/nginx/conf/nginx.conf
我們可以看到裏邊有nginx.conf內有重點如下:
server{
listen 81;
server_name localhost;
...
}
2.更改nginx.conf配置文件
我們主要更改這段就行了,底下那段location要刪掉:
server{
listen 80; # 這裏寫啓動端口
server_name localhost; # 這裏有域名可以換成域名
index index.php index.html index.htm default.php default.htm default.html;
root /usr/local/webserver/nginx/h5; # 這裏填入項目位置
}
3.重新載入配置文件
/usr/local/webserver/nginx/sbin/nginx -s reload # 重新載入配置文件
/usr/local/webserver/nginx/sbin/nginx -s reopen # 重啓 Nginx
五、最後
瀏覽器輸入服務器地址,看到自己的項目啓動頁!
寫在最後:
我的聯繫方式 [email protected] ,各位如果有什麼問題可以問我
因爲工作學習,我儘量回覆,抱歉