如果你不想自己搭建服務器，可以直接用微信提供的即可，跳過本篇即可，查看基于mpvue的微信小程序全棧保姆式教程二即可

之前寫過一兩個vue的項目，用vue寫前端感覺很方便簡潔，比之前html+jQuery+css的方式要舒服的不行，我個人感覺是顛覆了前端的寫作方式。我一直對移動端感興趣，但是學習Android或者iOS成本太高，而微信小程序是個很好的切入方式，并且隨著美團開源mpvue框架，如果你熟悉vue幾乎沒有學習成本，通過mpvue就可以上手微信小程序，但是微信小程序的上線、發(fā)布又有自己的一些特點，畢竟是微信的東西，你肯定不能隨便發(fā)布，需要審核等其他東西。學習一個東西最快的方式就是直接用這個東西開發(fā)一個作品出來，在寫代碼的過程中就會慢慢熟悉，會出現(xiàn)單詞拼錯、會出現(xiàn)奇怪的bug，然后就去百度，google，查閱官方文檔，等把代碼寫完也就熟悉了。所以不要覺得自己這不會，那不會，上去就是干?。。?br> 本文主要是基于全網(wǎng)首發(fā)mpvue課程：小程序全棧開發(fā)這個視頻看了兩遍，第一遍是二倍速看一遍，第二遍是二倍速跟著敲代碼。慕課網(wǎng)實戰(zhàn)視頻是我見過最好的教學視頻，干貨足足，我之前買過三個實戰(zhàn)視頻，如果有錢的建議去慕課官網(wǎng)購買視頻，沒錢的就b站看吧。既然是保姆式全棧教程，就必須的詳細，購買服務器、域名、ssl證書、域名備案、代碼編寫、微信小程序工具使用、上線部署必須都得有。說了這么多廢話，下面開始吧，

購買云服務器

微信小程序的生產(chǎn)環(huán)境可以直接使用騰訊提供的一套環(huán)境，域名11rmb一年，服務器49一個月。里面有配置好的nodejs，mysql，ssl證書等。但是有點貴對于學生來說，所以我們會直接搭建后臺，服務器10rmb一個月，域名4rmb一年。

購買騰訊云主機

https://cloud.tencent.com/act/campus點擊購買騰訊云學生主機，一個月十塊錢，建議購買三個月以上，這是個坑，一開始我購買了一個月，備案的使用一直提示沒有可用資源，搞了一天才知道云主機必須得三個月以上并且是包年包月的。選擇ubuntu16.04的系統(tǒng)，購買完畢后登錄騰訊云服務器控制臺https://console.cloud.tencent.com/cvm/index

騰訊云服務器后臺

登錄騰訊云主機

購買后會收到站內(nèi)信和注冊時的郵箱也會收到一封郵件，上面有初始密碼，可以進行密碼重置，直接輸入即可。

重置密碼

開通安全組

綁定安全組

新建xshell回話

輸入su passwd root回車，然后輸入你的root密碼即可，然后輸入su root回車，然后輸入剛剛設置的密碼即可進以root權限進入系統(tǒng)。但是這個時候還不能通過xshell以root權限直接登錄服務器，需要設置一下。
vim /etc/ssh/sshd_config 回車進入編輯頁然后按 i進入編輯模式找到PermitRootLogin without-password去掉注釋符號#,然后修改without-password為yes，如下圖所示，然后按Esc退出編輯模式，依次按下:wq!保存退出，然后輸入reboot重啟或者在騰訊云服務器后臺進行重啟都可以。然后再新建一個xshell配置，連接時輸入用戶名root即可。

配置root賬戶

域名購買

前天通過騰訊域名新購活動購買的塊錢一年的.xyz域名，剛剛找不到了大家就花11塊錢購買吧https://buy.cloud.tencent.com/domain?domain=qwrq&tlds=.xyz，按照提示填寫完畢，購買狗會收到郵件提醒，盡快通過實名認證，以防被收回。

域名解析

就是別輸入域名可以到你的服務器上面，點擊解析、立即設置、輸入公網(wǎng)ip即可

點擊解析

立即設置

輸入公網(wǎng)ip

ssl證書

https://console.qcloud.com/ssl按照提示即可，等待審核

網(wǎng)站備案

https://console.qcloud.com/beian/authcode 生成備案授權碼，https://console.qcloud.com/beian按照提示進行備案即可。比較麻煩又是拍照，又是打印的，如果你就是寫寫玩玩小程序這部可以跳過，如果你的小程序有后臺，并且想自己搭建后臺，這一步必須做，因為不備案的話，沒法提交小程序審核。

云服務器環(huán)境配置

安裝nodejs環(huán)境，安裝nginx做反向代理，安裝mysql數(shù)據(jù)庫

安裝nodejs環(huán)境

參考Ubuntu16.04安裝最新版nodejs
通過xshell以root賬戶登錄服務器

apt-get install nodejs
apt install nodejs-legacy
apt install npm

更新淘寶鏡像源

npm config set registry https://registry.npm.taobao.org
npm config list

安裝全局n管理器(用于管理nodejs版本)

npm install n -g

安裝最新穩(wěn)定版nodejs

n stable
node -v

最好版本是9.11以上，因為我搭建的時候就是9.11.2。

安裝nginx服務器

apt-get install nginx

查看nginx版本

nginx -v

配置ssl

如果騰訊云服務器審核比較慢，咱們自己生成即可
創(chuàng)建文件夾 /data/release/nginx

cd /data
mkdir -p release/nginx
cd release/nginx

然后在/data/release/nginx下進行下面的操作
參考自己制作ssl證書：自己簽發(fā)免費ssl證書，為nginx生成自簽名ssl證書

openssl genrsa -des3 -out ssl.key 1024

上面會要求輸入密碼，自己輸入一個好記的密碼即可

mv ssl.key xxx.key
openssl rsa -in xxx.key -out ssl.key
rm xxx.key
openssl req -new -key ssl.key -out ssl.csr
openssl x509 -req -days 365 -in ssl.csr -signkey ssl.key -out ssl.crt

最后如下

生成ssl證書

cd /etc/nginx/conf.d
touch weapp.conf

WinSCP新建會話和xshell類似，進入到/etc/nginx/conf.d文件夾下，右鍵編輯，內(nèi)部編輯器打開即可

編輯weapp.conf

upstream app_weapp {
    server localhost:5757;
    keepalive 8;
}
 
server {
    listen      80;
    server_name xcdhfgf.xyz;
 
    rewrite ^(.*)$ https://$server_name$1 permanent;
}
 
server {
    listen      443;
    server_name xcdhfgf.xyz;
 
    ssl on;
 
    ssl_certificate           /data/release/nginx/ssl.crt;
    ssl_certificate_key       /data/release/nginx/ssl.key;

 
    location / {
        proxy_pass http://app_weapp;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

把里面域名xcdhfgf.xyz換成你自己的即可，然后保存退出。
輸入nginx -t 如下即代表成功

root@VM-0-2-ubuntu:/# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

然后輸入http://你的域名/weapp/demo，跳轉到https并顯示 502 Bad Gateway，則表示配置成功。

成功配置

安裝mysql

安裝mysql

apt-get install mariadb-client-core-10.0

安裝mysql客戶端

apt install mysql-client-core-5.7

進入mysql

mysql -u root 

然后創(chuàng)建用戶，并可以遠程登錄

mysql> grant all on *.* to root@'%' identified by '你的密碼' with grant option;
>flush privileges;

修改mysql配置使得可以遠程訪問

vim /etc/mysql/mysql.conf.d/mysqld.cnf

注釋掉bind-address = 127.0.0.1

mysql遠程訪問

新建MySQL連接1

新建MySQL連接2

在上圖1填寫你的公網(wǎng)ip，2輸入之前設置的密碼，點擊3查看是否可以連接，然后點擊確定即可。如下圖所示說明已經(jīng)連接成功了。其中cAuth是微信小程序的數(shù)據(jù)庫，下一篇文章會給出建表SQL。

image.png

到此為止服務器配置完畢，下面就是代碼部分了，我會把代碼上傳到github供大家下載，然后分別就微信小程序開發(fā)環(huán)境、上傳、生產(chǎn)環(huán)境配置進行講解。
基于mpvue的微信小程序全棧保姆式教程二