当前位置:主页 > 杂项 > 利用云服务器发布项目

利用云服务器发布项目

xi2年前 (2022-12-11)杂项16052

前言

平时开发我会写一些小demo,我自己觉得有用的会集中起来形成一个项目,本来想利用gitee的gitee page直接部署出来,但后面了解了下,它只支持官网之类的静态页面,无法与后台数据交互,想要完整的服务还是得有自己的服务器(我整了个轻量应用服务器),接下来我就以此项目为例子,不用敲一行代码,将其部署到云端,并记录下具体步骤。

效果

话不多说,先看结果。

  • 浏览链接:http://xisite.top/
  • 我做了个特效封面,有鼠标滑动的涟漪效果,用的ripples.js。
  • 具体内容就下面这些,有些是自己开发的,有些是学习过程中收集的,之前疫情可视化的项目也在里面。

    服务器

    我自己的话,第一步肯定是买现成的云服务器,当然你要买物理设备搭建的话,那你是大佬,下面的你就不用看了。我大概看了下腾讯,阿里,华为等等都是类似的,都可以,我选了阿里的,就以此为例子。
  1. 直接进阿里云官网,在产品里面找到轻量应用服务器。

  2. 选择服务器实例,区域尽量选择靠近自己位置的,应用镜像为宝塔(一个服务器管理应用),没有选到宝塔也无所谓,后面可以重置。
  3. 购买完成后从这里进入产品控制台。

    我自己个人使用对机器性能没有过多要求,买的是2核2g内存50g固态。
  4. 点击”我的轻量”进入服务器详情,之前不是宝塔镜像的可以点击系统重置,选中宝塔进行重置。
  5. 在“应用详情”中找到宝塔面板信息。点击远程连接的Workbench一键连接,在弹出的命令行界面中依此输入这三条命令。获取面板地址、用户名、密码。
  6. 登录进入后,即可通过该宝塔面板控制管理你的服务器。


    面板进不去的需要在防火墙中开放8888端口。

    项目部署

    上面服务器相关的就处理完了,接下来是处理项目的部署。
  7. 点击“网站”中的添加站点,输入地址栏的ip地址(自己有域名的也可以直接填写域名,但需要解析)。
  8. 点击“文件”。站点添加成功后会在这个:/www/wwwroot/目录下自动生成以你网站名为名的文件夹。
  9. 将你项目打包后生成的dist文件直接拖拽上传到你的网站名文件夹下,我是纯web前端项目,没后台的,这里就不做后端部署说明。
  10. 在浏览器中输入你的ip地址或域名,是不是页面已经出来了?没出来的话需要在防火墙中开放80端口,同时点击:网站–设置–防盗链–允许空HTTP_REFERER请求。出来的仔细浏览你的页面会发现使用了接口的地方会报跨域错误。你需要使用nginx进行反向代理。在“软件商店”中找到nginx进行安装。
  11. 安装完成后,点击:网站–设置–添加反向代理。

    域名

    有了ip,为什么还要域名呢?其实使用ip完全是可以访问使用的,但为了方便人们记忆使用方便所以才出现了域名。一般的顶级域名比较贵,也就知名度比较高,利于seo优化,自己使用的话选一个便宜的也无所谓,我就用了top。

    证书

    在使用chrome或者edge访问你自己的页面时,相信你已经发现了,百度、阿里、腾讯之类的网站在地址栏有个小锁的图标,但自己的却是个感叹号,标记了不安全。把地址拷出来,会发现他们都是https开头的,自己的却是http开头的,这是由于没有证书的原因,影响到的就是网站安全性,对于自己的网站要求不高的可以不用管,毕竟我自己私人的玩意儿不值几个钱,没人会搞你。但想要证书的也可以自己去买一般比较贵,有免费的,但安全性不高。

    结语

    此文章仅做自己发布项目的一个记录,可能还有其他纰漏的地方请见谅。
转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=32

“利用云服务器发布项目” 的相关文章

卸载手机自带的系统软件

卸载手机自带的系统软件

此教程只适合安卓手机!非adb非root,傻瓜式操作。新手机到手了,激动啊!打开看看,是不是什么乱七八糟的鬼软件手机厂商都给你整齐活了。呵,拼夕夕是吧?我卸载!呵,手机商城是吧?我卸载!呵,浏览器广告...

无法加载nodejs\vue.ps1

无法加载nodejs\vue.ps1

发现问题刚换了电脑之后,安装了node.js、vue/cli,在vscode中使用vue ui命令新建vue项目时,发现报错如下: 分析问题多番查询后发现,一般此类问题大多出现在第一次运行脚本的电脑...

评论列表

wenhua
wenhua IP:广东省
10个月前 (09-07)

大佬这个特效封面有引用代码参考吗,太帅了,想拿来参考

xi IP:内蒙古 回复:
封面我是利用了ripples.js,这是我封面源码。
链接:https://pan.baidu.com/s/1Ed7PW9havVBGPYmHRoZbjA?pwd=yp96
提取码:yp96
9个月前 (09-15)

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。