目录
前言一、准备服务器二、连接宝塔面板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
总结
在建立网站过程中,我一个前端开发,慢慢摸索后台、数据库、部署,踩了很多坑后得出的这篇文章,希望可以帮到大家。