uni-app部署H5項目vue項目到nginx

前言:昨天在搗鼓自己在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] ,各位如果有什麼問題可以問我
因爲工作學習,我儘量回覆,抱歉

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章