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

之前写过一两个vue的项目，用vue写前端感觉很方便简洁，比之前html+jQuery+css的方式要舒服的不行，我个人感觉是颠覆了前端的写作方式。我一直对移动端感兴趣，但是学习Android或者iOS成本太高，而微信小程序是个很好的切入方式，并且随着美团开源mpvue框架，如果你熟悉vue几乎没有学习成本，通过mpvue就可以上手微信小程序，但是微信小程序的上线、发布又有自己的一些特点，毕竟是微信的东西，你肯定不能随便发布，需要审核等其他东西。学习一个东西最快的方式就是直接用这个东西开发一个作品出来，在写代码的过程中就会慢慢熟悉，会出现单词拼错、会出现奇怪的bug，然后就去百度，google，查阅官方文档，等把代码写完也就熟悉了。所以不要觉得自己这不会，那不会，上去就是干！！！
本文主要是基于全网首发mpvue课程：小程序全栈开发这个视频看了两遍，第一遍是二倍速看一遍，第二遍是二倍速跟着敲代码。慕课网实战视频是我见过最好的教学视频，干货足足，我之前买过三个实战视频，如果有钱的建议去慕课官网购买视频，没钱的就b站看吧。既然是保姆式全栈教程，就必须的详细，购买服务器、域名、ssl证书、域名备案、代码编写、微信小程序工具使用、上线部署必须都得有。说了这么多废话，下面开始吧，

购买云服务器

微信小程序的生产环境可以直接使用腾讯提供的一套环境，域名11rmb一年，服务器49一个月。里面有配置好的nodejs，mysql，ssl证书等。但是有点贵对于学生来说，所以我们会直接搭建后台，服务器10rmb一个月，域名4rmb一年。

购买腾讯云主机

https://cloud.tencent.com/act/campus点击购买腾讯云学生主机，一个月十块钱，建议购买三个月以上，这是个坑，一开始我购买了一个月，备案的使用一直提示没有可用资源，搞了一天才知道云主机必须得三个月以上并且是包年包月的。选择ubuntu16.04的系统，购买完毕后登录腾讯云服务器控制台https://console.cloud.tencent.com/cvm/index

腾讯云服务器后台

登录腾讯云主机

购买后会收到站内信和注册时的邮箱也会收到一封邮件，上面有初始密码，可以进行密码重置，直接输入即可。

重置密码
还要开通安全组才可以通过xshell远程登录，点击安全组按照提示进行添加，主要是开通22、80等常用端口。可以随便把3306端口开通，为MySQL数据库的远程连接做好准备。
开通安全组
然后进图云主机进行安全组的绑定，把刚刚新建的安全组绑定到这台服务器即可。
绑定安全组
通过xshell登录，在1输入你云服务器的公网ip，2输入22即可。然后打开刚刚新建的会话，进行连接，有个坑，在输入用户名时一定要输入ubuntu，因为腾讯云服务器ubuntu系统默认用户名是ubuntu，密码就是刚刚设定的密码。进入后不是超级管理员用户，操作起来不是很方便，接下来创建root权限，并远程登录。 新建xshell回话

输入su passwd root回车，然后输入你的root密码即可，然后输入su root回车，然后输入刚刚设置的密码即可进以root权限进入系统。但是这个时候还不能通过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，按照提示填写完毕，购买狗会收到邮件提醒，尽快通过实名认证，以防被收回。

域名解析

就是别输入域名可以到你的服务器上面，点击解析、立即设置、输入公网ip即可

点击解析 立即设置 输入公网ip

ssl证书

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

网站备案

https://console.qcloud.com/beian/authcode 生成备案授权码，https://console.qcloud.com/beian按照提示进行备案即可。比较麻烦又是拍照，又是打印的，如果你就是写写玩玩小程序这部可以跳过，如果你的小程序有后台，并且想自己搭建后台，这一步必须做，因为不备案的话，没法提交小程序审核。

云服务器环境配置

安装nodejs环境，安装nginx做反向代理，安装mysql数据库

安装nodejs环境

参考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

安装最新稳定版nodejs

n stable
node -v

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

安装nginx服务器

apt-get install nginx

查看nginx版本

nginx -v

配置ssl

如果腾讯云服务器审核比较慢，咱们自己生成即可
创建文件夹 /data/release/nginx

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

然后在/data/release/nginx下进行下面的操作
参考自己制作ssl证书：自己签发免费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证书
然后进行nginx的配置 参考微信小程序开发环境（阿里云服务搭建+可运行的demo）
可以通过WinSCP连接服务器，因为要编一些配置，如果对vim不是很熟悉的话，WinSCP是个很好的工具首先通过xshell在/etc/nginx/conf.d创建weapp.conf

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

WinSCP新建会话和xshell类似，进入到/etc/nginx/conf.d文件夹下，右键编辑，内部编辑器打开即可

编辑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 

然后创建用户，并可以远程登录

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远程访问
然后下载Navicat Premium 破解方https://blog.csdn.net/qq_21205435/article/details/78902052 连接远程数据库。新建MySQL连接
新建MySQL连接1 新建MySQL连接2

在上图1填写你的公网ip，2输入之前设置的密码，点击3查看是否可以连接，然后点击确定即可。如下图所示说明已经连接成功了。其中cAuth是微信小程序的数据库，下一篇文章会给出建表SQL。

image.png

到此为止服务器配置完毕，下面就是代码部分了，我会把代码上传到github供大家下载，然后分别就微信小程序开发环境、上传、生产环境配置进行讲解。
基于mpvue的微信小程序全栈保姆式教程二