目录

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

---

前言

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

---

一、准备服务器

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

二、连接宝塔面板

1.用finalshell连接服务器

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

单击名称连接

2.在服务器安装宝塔

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

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

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

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

1.下载所需软件

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

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

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

配置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;}}

保存后记得重载配置。

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

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

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

因为我在前台项目是这样调接口的：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;}

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

1.导出本地数据库

2.在服务器添加数据库

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

3.在服务器导入数据表

打开数据库管理

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

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

五、在服务器启动node

1.在服务器安装node依赖

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

2.用PM2管理器启动node

填好后提交即可。

六、开放端口

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

七、域名

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

八、成果展示

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

47.100.176.197

liangziqi.top

---

总结

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