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

文章目录

【前端Vue+后端Node.js+MySql】部署到服务器1、买服务器2、服务器操作2.1、修改服务器密码，xshell登录，xftp上传前后端代码至：/www/wwwroo下，2.2、安装宝塔面板2.3、在宝塔的操作2.3.1、一键安装软件如MySQL、Node.js等2.3.2、宝塔新建数据库2.3.3、宝塔用pm2添加后端项目2.3.4、宝塔网站添加前端项目选Node项目，真实端口就是起前端的端口，可以绑定域名或者待会再绑。2.3.5、域名2.3.6、备案，不备案的话域名可能被屏蔽2.3.7、网站底部补上备案号

1、买服务器

价格参考：知乎-云服务器哪家好？

我选的是腾讯云CentOS系统，一年88元很便宜，2核、内存2G、系统盘40G

2、服务器操作

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

/www/wwwroot/xxx-web

/www/wwwroot/xxx-manage

记下服务器ip、账号密码

2.2、安装宝塔面板

安装宝塔教程

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

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

开放如下：

数据库的3306宝塔外网地址的端口HTTP(80)和HTTPS(443)Linux登录(22)(用于连xshell)和Windows登录(3389)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_buffers4 16k;gzip_http_version 1.1;gzip_comp_level 2;gzip_typestext/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;index index.html index.htm index.php;root /www/server/nginx/html;#error_page 404 /404.html;include enable-php.conf;location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${expires30d;}location ~ .*\.(js|css)?${expires12h;}location ~ /\.{deny all;}location /api {proxy_pass http://1.117.xxx.xx:3000/api;}access_log /www/wwwlogs/phhzNew.log;}server{listen 8086 ssl;server_name 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/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.xxx.xx: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.jsmodule.exports = {// 跳过检查hostdevServer: { disableHostCheck: true }}

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

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

腾讯云备案

一步步来就可

注意点

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

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

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

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

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

备案完成

2.3.7、网站底部补上备案号

<p v-show="leftShow" class="footer-left" ><a href="https://beian./" target="_blank">ICP备案号</a></p>leftShow: true,watch: {$route(val) {if (val.path.indexOf('home') !=-1) {this.leftShow = true;} else {this.leftShow = false;}},},