vue+express+mysql经过nginx反向代理映射不一样项目的服务器部署

时间 2020-05-26

标签 vue+express+mysql vue express mysql 经过 nginx 反向代理映射不一样项目服务器部署栏目 MySQL 繁體版

原文原文链接

前言：javascript

这个教程是我本身摸索的，至于原理性东西，如今还在学nginx，后期会了再来完善！php

开始配置项目以前，请确保你有一台服务器，学生初次购买的话，很便宜，一百多能够有一年的服务，阿里云或者腾讯云，百度云均可以，我是买腾讯云的。css

实验配置：本地是windows10,前台用的是vue，后台用的是nodejs的框架express，数据库用的是mysql,服务器个人是学生服务器，很便宜100多，linux centos7,而后本次实验我用的是宝塔链接个人服务器，至于宝塔怎么链接，这个网上也有教程，初学者建议使用宝塔配置，宝塔配置事后，你会明白一些原理性的东西，后期你能够学学Linux操做系统的操做指令，用xShell远程链接服务器，再配置，这样的话，你思路就清晰了。html

基于linux的万物皆文件，说一下进入某个文件的小技巧。前端

Linux下的进入某个目录是 cd /xxx/xxx,这个目录结构通常比较长，很容易输错，小技巧就是使用ftp链接你的服务器，而后它里面能够可视化你的文件，找到你的文件，而后选择复制路径，在xsell里面 cd /粘贴你复制的路径，这样你的速度又快，又准，哈哈。vue

---------------------------------------------------------------------------------------------------------------------------java

开始正文：node

1.服务器模块mysql

以个人腾讯云为例：linux

上面能够看到，我已经申请了一台服务器，并且已经完成了备案，这些怎么购买的问题，网上有其它教程，我不赘述，至于备案的话，的确比较慢的，由于我是全程在网上备案的，加上是除夕那天买的，备案成功，好像一个月时间，中间腾讯客服小姐姐屡次打电话给我，说个人网页不能够有其它商业标签，由于是我的网站的缘由，企业网站才能够盈利。还有一次是，我把内容放在404页面了，由于我以为个人项目不符合规定，索性让访客直接访问404页面，而后腾讯客服小姐姐又打电话给我，说个人网站找不到了，必须改回来，否则一星期后，就要关闭个人网站……因此我又修改了，说这些的目的是为了你购买服务器以后，我的项目放置的一些问题，必定要符合规定，避免一些没必要要的麻烦。

再多说一点，可能你会有疑惑，说为何有的我的网站，有的还有岛国等动做片，这些都没被禁掉，首先，你要明白，有的一些服务器是国外，或者香港澳门台湾这些的，国外服务器，以及我国的香港，澳门，台湾这些比较特殊的地区不须要备案，限制比较小，至于为何你能够上网本身再搜索其它答案。

上面好像废话了，首先开始正文：

1.1给本身购买的域名配置二级域名，或者三级域名。

个人网址是：humianyuan.cn(这个是一级域名)，（www.humianyuan.cn）二级域名，这两个域名映射的都是个人静态项目，就是vue打包后的dist资源而已。

还有一个onepice.humianyuan.cn,它映射的是个人动态项目，就是有数据库操做的。(这个不知道应该属于二级域名，仍是三级域名，若是你刚好知道规则，能够在评论区帮我解答一下，十分感谢。)

在搜索框输入：域名，而后点击个人域名管理

而后能够看见下面这个东西：点击下面的红色的划线部分，进行配置下级域名（由于不知道叫几级，统一称下级）

点击解析以后，你能够看到：以下界面，点击添加记录，给你的域名配置下级域名

而后把你的鼠标放到不一样的输入框，它会有对应的一些配置的提示，例以下面我举俩个例子：

上面这些提示，应该能够说提示的很全面了，好比主机记录，就是填入你想要为你的域名配置的下级域名的别名.

打个比方，个人域名是humianyuan.cn,那么腾讯云自动帮我配置了，www.humianyuan.cn(下级域名)，

而后我再添加了一个，onepice.humianyuan.cn(下级域名)，这样我就多了一个下级域名，至于能够配置多少个，好像在哪里有说明，具体看不一样服务器提供商能够帮你免费解析多少个子域名。

附上demo：

添加成功以下

演示个人输入操做：

这样你的下级域名就配置好了，通常你若是是刚开通服务器的话，要先把你的80端口打开，有的服务器提供商默认是没有开启的，至于怎么开启，是在控制台的安全按钮里面的安全组，点击安全组是一些默认帮你配置好的端口映射，怎么配置，也可自行百度。

这样，你的腾讯云自身携带的管理后台就配置好了。

接下来配置你的宝塔面板。

1.2宝塔面板：

1.2.1在搜索框搜索，并下载好下面的软件。

nginx用于代理映射，充当代理服务器，nginx但是牛逼的东西，配置虽然几步，可是里面的原理性东西但是很深的，它不但能够当代理服务器，还能够充当web服务器，还有邮件服务器等等……功能很强大，可是个人了解不多，就不吹了，

mysql是我用来放值个人数据库的。

pm2下载后，默认帮你配置好了node环境，还有npm，用于node扩展包的管理工具，你能够利用npm再链接淘宝的镜像地址，而后下载cnpm，用cnpm安装node扩展包速度很快，比较npm服务器在国外，cnpm是淘宝搭建的，因此感谢淘宝，感谢阿里。

下载好上面红色部分的软件后，你须要在pm2里面下载express框架，由于我node后台用的是它。只说它。

点击pm2的设置：

点击下面的模块管理，在搜索框搜索express，而后安装。

到这里，你的第三方软件下载完成。接下来是这些软件的配置的问题。

1.2.2端口配置：

放置你须要用的端口，例如我后台接口的端口号是3000，我索性把3000到3500一块儿放行，不过这里配置了，好像腾讯后台也没有放行，因此这里不配置应该没有关系，由于还须要在腾讯云后台再次配置，可是个人后端接口自己就放在个人自己服务器上，因此内部端口是默认所有放行的，此处的配置好像没有意义。不过若是你有一百台服务器的话，那么这里配置好，在腾讯云后台也要配置，不过若是你有一百台服务器，应该是看不到我这篇文章了，毕竟这个是小白看的。

1.2.3数据库配置

点击你的添加数据库，就能够配置数据库名称，密码了。

给个demo:

接下来说一下，上传你的项目到服务器，再讲nginx，反向代理吧。

2.上传项目

2.1项目模块

首先上传项目以前首先，你要把你的vue,运行npm run build,进行打包，而后把打包结果生成的dist文件夹直接压缩，上传到宝塔。

点击文件，来到wwwroot的目录下：

能够看到，我下面的三个红线的文件夹，带有1的是个人先后端分离项目，带有2的是纯静态页面，不涉及数据库操做。

再来给你看看目录结构：

纯前端的目录结构：看了下面你就会知道，你上传的只有dist下面的内容，node_module是不用上传的，由于npm2已经自带它须要的环境配置了。

先后端分离项目：

*前端模块，把打包好的dist文件直接上传到这里就好。

*后端模块，把你的后端项目压缩后直接上传，丢到这里，node_module这些包我本来觉得不须要的，可是后台须要，由于我上传了以后，把它删了，而后用xshell链接服务器的时候，进入这个目录，执行了npm install,它会自动根据package.json文件的依赖来下载依赖的node包，可是npm下载的时候失败了，多是国外服务器链接到这里太远了，不稳定，因此我直接使用npm install -g cnpm --registry=https://registry.npm.taobao.org ，安装个人cnpm,而后用cnpm install安装好个人项目依赖，发现多了的node_module,因此应该说明你的后台用到的node扩展包不能够删除。

至于怎样上传，直接点击上传按钮就行了，其余的应该不能吧，好歹写过点程序……

3.接下来进行nginx的反向代理配置

直接粘贴配置信息再说明：在软件商店点击nginx的设置

而后弹出：

点击配置修改

蓝色部分是默认配置。

user www www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log crit; pid /www/server/nginx/logs/nginx.pid; worker_rlimit_nofile 51200; events { use epoll; worker_connections 51200; multi_accept on; } http { include mime.types; #include luawaf.conf; include proxy.conf; default_type application/octet-stream; server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; sendfile on; tcp_nopush on; keepalive_timeout 60; tcp_nodelay on; fastcgi_connect_timeout 300; fastcgi_send_timeout 300; fastcgi_read_timeout 300; fastcgi_buffer_size 64k; fastcgi_buffers 4 64k; fastcgi_busy_buffers_size 128k; fastcgi_temp_file_write_size 256k; fastcgi_intercept_errors on; gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; limit_conn_zone $binary_remote_addr zone=perip:10m; limit_conn_zone $server_name zone=perserver:10m; server_tokens off; access_log off; 
server
    {
        listen 80;#监听外部端口
        server_name humianyuan.cn;监请求的服务器名称，若是你只有ip地址，那就在这里写ip就行了，好比：198.121.2.2
root  /www/wwwroot/humianyuan.cn;
        location / {
            try_files $uri $uri/ @router;#须要指向下面的@router不然会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要缘由是路由的路径资源并非一个真实的路径，因此没法找到具体的文件
        #所以须要rewrite到index.html中，而后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        index index.html index.htm index.php

        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }
    
        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
    server
    {
        listen 80;#监听外部访问的端口
        server_name onepice.humianyuan.cn;
        index index.html index.htm index.php;
        root  /www/wwwroot/onepice/dist;#你的前端路径下index.html的根目录
         location / {
            try_files $uri $uri/ @router;#须要指向下面的@router不然会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要缘由是路由的路径资源并非一个真实的路径，因此没法找到具体的文件
        #所以须要rewrite到index.html中，而后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #/api_hu66 是你本身定义的接口名称，你后台本身定义的
         location /api_hu66 {
            rewrite  ^.+api/?(.*)$ /$1 break;
            proxy_pass  http://127.0.0.1:3000;    #node api server 即须要代理的IP地址
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }
      #error_page 404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }
    
        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
include /www/server/panel/vhost/nginx/*.conf;
}

上面这些配置就配置好了，同个访问端口，携带不一样的服务器名称，映射到了不一样的vue项目。

配置好上面这些，记得添加站点信息：

点击添加站点，按规则填写，这个就不教你了，留点给你思考的空间，授人以鱼不如授人以渔。

本篇简单教程完结，好了花了2个小时写的，6点到如今上网课的时间。