目录

  • 前言
  • 一、准备服务器
  • 二、连接宝塔面板
  • 1.用finalshell连接服务器
  • 2.在服务器安装宝塔
  • 三、上传前后台项目到服务器
  • 1.下载所需软件
  • 2.上传前台vue项目并配置nginx
  • 3.上传后台node项目并配置nginx
  • 四、同步mysql数据库到服务器
  • 1.导出本地数据库
  • 2.在服务器添加数据库
  • 3.在服务器导入数据表
  • 五、在服务器启动node
  • 1.在服务器安装node依赖
  • 2.用PM2管理器启动node
  • 六、开放端口
  • 七、域名
  • 八、成果展示
  • 总结



前言

在本地开发好网站后,只能自己看,如果想要别人也能看到,就需要公网ip并把项目部署到此公网ip的服务器上。


一、准备服务器

网上好像有免费的服务器,但是为了节省时间和精力,我没有去研究怎么获取,我直接在阿里云买了。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_centos

二、连接宝塔面板

1.用finalshell连接服务器

下载页面: FinalShell SSH工具,我选的是Windows版下载地址。下载安装后按图示操作。如果服务器22端口没开放的话,记得开放,不然会出错,开放端口在第六点。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_vue_02


宝塔面板部署项目maven 宝塔面板部署nodejs项目_宝塔面板部署项目maven_03


单击名称连接

宝塔面板部署项目maven 宝塔面板部署nodejs项目_node.js_04

2.在服务器安装宝塔

输入 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 后按回车。这是Centos的安装命令,其他系统的安装命令见:安装宝塔面板命令

宝塔面板部署项目maven 宝塔面板部署nodejs项目_宝塔面板部署项目maven_05


按回车开始安装,安装过程中有需要输入的地方输入y。

安装完成后打开宝塔页面登录。如果服务器8888端口没开放的话,记得开放,不然会出错,开放端口在第六点。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_mysql_06

三、上传前后台项目到服务器

1.下载所需软件

登录宝塔面板后下载软件,我目前的软件是这些

宝塔面板部署项目maven 宝塔面板部署nodejs项目_mysql_07

2.上传前台vue项目并配置nginx

在www目录下新建文件夹project,project里面再新建文件夹meme(名称自己定),上传vue打包后生成的dist文件夹到meme。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_vue_08


配置nginx,其中的server_name是服务器公网ip,/www/project/dist是刚刚上传的dist文件的地址。

server{
         listen 81;
         server_name 47.100.176.197;
         location / {
            root   /www/project/meme/dist;
            try_files $uri $uri/ /index.html;
          }
         }

宝塔面板部署项目maven 宝塔面板部署nodejs项目_centos_09


保存后记得重载配置。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_vue_10

3.上传后台node项目并配置nginx

上传meme-server(node项目里除了node_modules都上传,图片里有是因为我之前在服务器npm i过了,后面会提到)到project目录里

宝塔面板部署项目maven 宝塔面板部署nodejs项目_宝塔面板部署项目maven_11


双击index.js文件,打开后查看接口监听端口,此处是8082。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_vue_12


因为我在前台项目是这样调接口的:api(“/api/ip”,ipdata,‘POST’),所以在nginx这样配置。意思是我在前台调接口47.100.176.197:81/api/ip,配置nginx后实际调的是http://127.0.0.1:8082/ip

location /api {
            rewrite  ^/api/(.*)$ /$1 break; 
            proxy_pass http://127.0.0.1:8082;
         }

宝塔面板部署项目maven 宝塔面板部署nodejs项目_宝塔面板部署项目maven_13

四、同步mysql数据库到服务器

1.导出本地数据库

宝塔面板部署项目maven 宝塔面板部署nodejs项目_centos_14

2.在服务器添加数据库

用户名、密码、数据库名称最好跟本地数据库一样,这样在本地测试、上线时不用改来改去。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_node.js_15

3.在服务器导入数据表

打开数据库管理

宝塔面板部署项目maven 宝塔面板部署nodejs项目_vue_16


如果打不开的话把端口改为888,然后用刚刚设置的用户名和密码登录。如果服务器888端口没开放的话,记得开放,不然会出错,开放端口在第六点。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_宝塔面板部署项目maven_17


登录进去后导入刚刚在本地导出的数据库,注意本地和服务器的数据库名称要相同,不然会出错。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_node.js_18


宝塔面板部署项目maven 宝塔面板部署nodejs项目_node.js_19

五、在服务器启动node

1.在服务器安装node依赖

打开之前下载的finalshell,连接服务器,输入以下命令。安装后可以到node项目目录(/www/project/meme-server)检查有没有node_modules文件夹。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_centos_20

2.用PM2管理器启动node

填好后提交即可。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_mysql_21

六、开放端口

上面用到的端口记得在宝塔面板和服务器防火墙开放

宝塔面板部署项目maven 宝塔面板部署nodejs项目_centos_22


宝塔面板部署项目maven 宝塔面板部署nodejs项目_node.js_23

七、域名

做完上面步骤,别人在浏览器输入47.100.176.197:81是可以看到页面的。如果不想通过ip,可以购买一个域名。我是在阿里云跟着步骤来买域名、解析域名的,跟着提示就可以了,这里就不赘述了。

宝塔面板部署项目maven 宝塔面板部署nodejs项目_node.js_24

八、成果展示

这两个连接都可以看到我的项目(之前域名没有备案完成,80端口不能用就用了81,现在域名备案好了,就改为80了,也就是默认端口,不用写出来),上面是我平时爬下来的表情包和头像。在微信打开链接,再设置成浮窗,聊天要用到表情包时,我直接点击浮窗,再长按图片转发就可以了,不用再一个个保存表情包那么麻烦,相当于我的另一个表情包库了。你们也可以试着用用嘻嘻嘻🌻

47.100.176.197liangziqi.top

宝塔面板部署项目maven 宝塔面板部署nodejs项目_mysql_25


总结

在建立网站过程中,我一个前端开发,慢慢摸索后台、数据库、部署,踩了很多坑后得出的这篇文章,希望可以帮到大家。