素材巴巴 > 程序开发 >

【Vue.js Node.js MySQL】项目部署到云服务器,详细到哭。

程序开发 2023-09-11 11:18:38

目录

  • 三、上传前后台项目到服务器
  • 四、同步mysql数据库到服务器
  • 五、在服务器启动node
  • 六、开放端口
  • 七、域名
  • 八、成果展示
  • 总结

  • 前言

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


    一、准备服务器

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

    二、连接宝塔面板

    1.用finalshell连接服务器

    下载页面: FinalShell SSH工具,我选的是Windows版下载地址。下载安装后按图示操作。如果服务器22端口没开放的话,记得开放,不然会出错,开放端口在第六点。
    在这里插入图片描述
    在这里插入图片描述
    单击名称连接

    在这里插入图片描述

    2.在服务器安装宝塔

    输入 yum install -y wget && wget -O install.sh http://download.bt.cn/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
    在这里插入图片描述


    总结

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


    标签:

    素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。