【前端Vue+后端Node.js+MySql】部署到服务器

【前端Vue+后端Node.js+MySql】部署到服务器

1、买服务器

价格参考：知乎-云服务器哪家好？
我选的是腾讯云CentOS系统，一年88元很便宜，2核、内存2G、系统盘40G

2、服务器操作

2.1、修改服务器密码，xshell登录，xftp上传前后端代码至：/www/wwwroot下，

/www/wwwroot/xxx-web
/www/wwwroot/xxx-manage
记下服务器ip、账号密码

2.2、安装宝塔面板

安装宝塔教程

注意：安装成功，会给出外网和内网访问宝塔面板的地址和用户账号及密码，记下

打不开外网地址是因为没有开放端口，端口开放在腾讯云轻量应用服务器的防火墙、宝塔的安全-系统防火墙
开放如下：

1. 数据库的3306
2. 宝塔外网地址的端口
3. HTTP(80)和HTTPS(443)
4. Linux登录(22)(用于连xshell)和Windows登录(3389)
5. Ping(ALL)(默认已经有了）

2.3、在宝塔的操作

2.3.1、一键安装软件如MySQL、Node.js等

2.3.2、宝塔新建数据库

添加数据库，选本地服务器，导入本地的sql文件，然后表格里备份那栏再点导入，去计划任务里设置备份数据库，用Navicat测试连接，成功就OK。

2.3.3、宝塔用pm2添加后端项目

Node.js后台使用pm2，先安装pm2，xshell命令行输入

npm install -g pm2

pm2 -v

安装不成功就百度，ln什么的命令行解决了
安装好后添加pm2到宝塔首页方便进入，
进入pm2面板，Node版本选成自己的，添加项目，启动文件选/server/index.js，状态正常就OK，
用postman测试请求，成功

2.3.4、宝塔网站添加前端项目

（一）直接起项目给别人看，已弃用

选Node项目，真实端口就是起前端的端口，可以绑定域名或者待会再绑。

域名管理添加自己的域名phhz.work，注意左上角那个是输入框！我以为只是提示，结果一直说域名不能为空。。。

外网映射打开，配置文件可以看到是自动转到80端口，用户输入域名就可以

SSL配置证书，去阿里申请一个免费的，为phhz.work生成证书，下载证书有.key和.pem文件，输入进去，强制HTTPS

服务状态里可以看状态&关闭&重启

输入ip可以看到网站了

（二）Nginx

宝塔软件商店安装Nginx

html里放前端打包的文件

config里放SSL证书

config里nginx.conf写（去宝塔里写会有提示，推荐）

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;

stream {
    log_format tcp_format '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time';
  
    access_log /www/wwwlogs/tcp-access.log tcp_format;
    error_log /www/wwwlogs/tcp-error.log;
    include /www/server/panel/vhost/nginx/tcp/*.conf;
}

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  phhz.work www.phhz.work;
 
    # 重定向所有HTTP流量到HTTPS
    return 301 https://phhz.work;
}
    
    

   server
     {
        listen 8086 ssl;
        server_name  phhz.work www.phhz.work;
    ssl_certificate /www/server/nginx/conf/phhz.work_bundle.pem;   # 配置证书
    ssl_certificate_key /www/server/nginx/conf/phhz.work.key;
        location / {
             root  /www/server/nginx/assets;
        }
    } 
server {
    listen 443 ssl;
    server_name phhz.work; #配置域名。
    root /www/server/nginx/xxx/html;
    index index.html index.htm;
    ssl_certificate /www/server/nginx/conf/phhz.work_bundle.pem;   # 配置证书
    ssl_certificate_key /www/server/nginx/conf/phhz.work.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
    ssl_prefer_server_ciphers on;

    location /api  {
      proxy_pass http://1.117.142.17:3000/api;
    }
}
include /www/server/panel/vhost/nginx/*.conf;
}

2.3.5、域名

后续，域名都转入腾讯云

我是在阿里买的域名，在腾讯云服务器的域名里添加已存在的域名phhz.work，然后给了两个DNS解析服务器地址，把这两个配到阿里那边（阿里域名控制台，点击域名phhz.work的管理，左侧有DNS修改，修改后之前阿里云配的phhz.work其他域名解析会失效）

域名解析里设置记录类型A、服务器ip、主机名b（就是phhz.work的b)

再回到腾讯云服务器的域名里加上主机名b

如果输入ip正常，输入域名打开报错invalid host header，参考：
解决 Vue 项目 invalid host header

我选的是直接跳过域名检查

// vue3 vue.config.js
module.exports = {
    // 跳过检查host
    devServer: { disableHostCheck: true }
}

改了后端文件需要在宝塔重启

2.3.6、备案，不备案的话域名可能被屏蔽

腾讯云备案

一步步来就可

注意点

删掉域名解析再备案

主体信息的通信地址得最详细 ，备注通信地址已为最详细

地址都和证件住址保持一个省，视频核身ip也是保持一个省，白色背景露出双肩

phhz.work网站信息：网站名称不能包含博客字样，备注不能包含博客社区评论字样，写上，该www.phhz.work不开展商业用途，不涉及前置审批业务。

腾讯云审核会致电网站负责人和应急联系人

腾讯云审核后收到管局短信，短信验证后进行管局审核

备案完成

2.3.7、网站底部补上备案号

        <p   class="footer-left" >
            <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号 xxxxxxxxxxxxx</a>
        </p>
 

2.3.8、公安备案

2.3.9、网站底部再补上公安备案号

    <p   class="footer-left" >
            <a href="https://beian.miit.gov.cn/" style="margin:0 10px 0 0;" target="_blank">ICP备案号 赣ICP备xxxxxxxxxx号-1</a>
            <span class="separate"> |	</span><a style="margin-left: 10px;" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36092602000047"  ><img src="@/assets/images/beian.png" style="    vertical-align: middle;"/> 赣公网安备 xxxxxxxxxxxxxxx号 </a>
        </p>