vps自建_七牛云搭建图床

vps自建_七牛云搭建图床目的:将一些小服务应用部署到免费的serverless/VPS上去环境:0成本实现方式:github+vercel/freewha效果:项目一:个人导航项目二:个人博客项目三:个人音乐服务器:背景:上面的项目以前我都是部署在家里群晖上,或者VPS上,但是FRPC和VPS的流量,延时、运维更新等问题,实际用起来很繁琐,最近两年serverless发展很火,于是就萌生了把他们部署到免费的VPS或者serverless产品上网络上有很多hexo博客部署到vercel、github.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

目的:将一些小服务应用部署到免费的serverless/VPS上去
环境:0成本
实现方式:github + vercel/freewha

效果:
项目一:个人导航
在这里插入图片描述
项目二:个人博客
在这里插入图片描述

项目三:个人音乐服务器:
在这里插入图片描述

背景:上面的项目以前我都是部署在家里群晖上,或者VPS上,但是FRPC和VPS的流量,延时、运维更新等问题,实际用起来很繁琐,最近两年serverless发展很火,于是就萌生了把他们部署到免费的VPS或者serverless产品上

网络上有很多hexo博客部署到vercel、github.io的列子,我这里就用第三个个人音乐网站为例子演示一下步骤:

1. fork此项目:musify

首先你要有一个github账户,然后找到一个开源的静态音乐项目,fotk它,这里拿我的举例:musify

fork它,然后上传一些音乐本地文件,或者编辑音乐文件到链接中:

  • 上传本地音乐文件到musify/src/audio/ 目录下
  • 然后编辑这个文件:musify/src/data.js ,怎么编辑就不细节了,参考我的格式就好了
  • 你问音乐文件上传到哪里,你可以直接上传到github,但是不要超过100M,或者推荐下面的方式

自己找个类似图床或者别的
申请了个freewha的1.5G的空间
我也试过永硕E盘,但是直链会变
onedrive 转直链接是个方案,但是太多的重定向,手机上的浏览器不支持

2. 申请一个vercel账户:https://vercel.com/

上传文件或者编辑data.js文件后,我们申请一个vercel账户,并使用github账户注册,首次注册引导他会让你选择你的仓库,

2.1我们选择那个音乐项目即可,选择导入

在这里插入图片描述

2.2在部署设置里面选择默认即可,等待部署完成后

在这里插入图片描述

2.3 部署完成后,访问域名查看效果

系统会自动分配一个域名,访问这个域名就可以看到效果,你也可以绑定自定义域名,按照他的引导或者直接设置cnname别名转发

在这里插入图片描述

3.申请一个freewha账户 freewha

记住域名和密码,你可以自定义域名也可以按系统分配的,在域名后加/cpanel进入控制台
在这里插入图片描述

3.1 将项目文件编译为静态文件

还是以上门那个音乐项目为例,vercel可以自动编译项目为静态文件,freewha没这个功能,我们也不可能用自己电脑、vps去编译再上传,这样会失去初衷,所以这里我们使用github action 来帮助我们编译并上传到freewha

3.2 在项目上,创建一个github action,并贴入下列代码:

这段代码的用途是拉取一个docker 使用vue去编译为静态文件,并输出到gh_pages分支

name: 生成静态文件

on:
  push:
    branches: [ main ]

jobs:
  build:
    name: ? Deploy
    runs-on: ubuntu-latest



    steps:
    - name: ? 1.Get latest code
      uses: actions/checkout@v2
    - run: echo 'VUE_APP_DEFAULT_CONFIG_URL=${
  
  { secrets.ENV_DEFAULT_CONFIG_URL }}' > .env
    

    - uses: borales/actions-yarn@v2.3.0
      with:
        cmd: install # will run `yarn install` command

    - uses: borales/actions-yarn@v2.3.0
      with:
          cmd: build # will run `yarn build` command

    - uses: borales/actions-yarn@v2.3.0
      with:
          cmd: global add serve # will run `yarn test` command
    
    - name: ? 5.Deploy-gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${
  
  { secrets.GITHUB_TOKEN }}
        publish_dir: ./build

        keep_files: true

Jetbrains全家桶1年46,售后保障稳定

3.3 授予github action 创建分支的权限:

在项目的设置中,action-general中,允许读写
在这里插入图片描述

3.4 随便改点文件,观察github action成功完成:

我们可以切换到分支gh-pages中看到静态文件

在这里插入图片描述

3.5 将静态文件上传到freewha

3.5.1 再创建一个github action脚本,命令如下:

他的作用就是当action 生成静态文件 完成的时候,触发上传文件到FREEWHA

name: ? Deploy freewha
on:
  workflow_run:
    workflows: ["生成静态文件"]
    branches: [main]
    types: 
      - completed

jobs:
  web-deploy:
    name: ? Deploy 部署到freewha
    runs-on: ubuntu-latest
    steps:
    - name: ? Get latest code
      uses: actions/checkout@v2
      with:
        ref: gh-pages
    
    - name: FTP-Deploy-Action
      uses: SamKirkland/FTP-Deploy-Action@3.1.1
      with:
        ftp-server: ftp://你的freewha域名
        ftp-username: 你的freewha域名
        ftp-password: ${
  
  { secrets.ftp_password }}

这里有一个环境变量${
{ secrets.ftp_password }}是freewha的密码,我们在项目设置里面设定,不要明文写在脚本里面,如果介意账户名和域名,课可以替换为变量,按下图设置:
在这里插入图片描述

3.5.2 再修改一次仓库文件,观察github action,他将按顺序轮流编译静态文件并上传,如果编译错误就是你的代码有问题

在这里插入图片描述
上传完成后,访问freewha的域名就会看到vercel一样的效果

结语:本文提供了一种方案,借住免费的云服务器和serverless平台部署文件,节省VPS或家用服务器的资源,
你可以在github上寻找你感兴趣的vue next项目,或者自己写的静态文件, 如果你发现了有趣或者更高级的做法,欢迎在下面留言

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234090.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • SCSA两个月

    SCSA两个月在一台HPDL380G3(集成5iRAID卡),上尝试安装solaris10,总是因为iLO的VirtualMedia问题而导致无法读盘,只好放弃。今天在Vmware上面安装好了solaris10,正式开始了solaris学习之旅。SCSA,两个月够么?两个月之后就知道了! 转载于:https://blog.51cto.com/youngshen/8013…

  • mac配置vscodec语言环境_vscodejava环境变量配置

    mac配置vscodec语言环境_vscodejava环境变量配置登陆终端输入java-version查看java的版本输入java-verbose查看java的安装环境路径没有的话,自己去搜一下怎么安装java的jdk,记得选1.18版本安装路径在这里安装完jdk后,输入/usr/libexec/java_home-V查看jdk版本复习什么是JDKJavaDevelopmentKit开发工具包包含Java开发工具和JREjava开发工具:编译工具javac.exe,jar.exe打包工具等。JRE=JVM+javaS

  • Pytorch搭建DenseNet[通俗易懂]

    Pytorch搭建DenseNet[通俗易懂]文章目录DenseNet与ResNeXtDenseNet网络的搭建Growth_rateTransitionLayerBottleneck定义网络小测试问题1训练与测试可视化网络结构DenseNet与ResNeXt首先回顾一下DenseNet的结构,DenseNet的每一层都都与前面层相连,实现了特征重用。下图表示一个DenseBlock如图所示,在一个DenseBlock中,第i层的…

  • ccproxy代理搭建_自动代理

    ccproxy代理搭建_自动代理由于公司内网windows系统要更新,特设置代理访问外网https://blog.csdn.net/cyl937/article/details/21330607

    2022年10月25日
  • Linux虚拟主机通过FTP软件创建目录时提示550 Create Directory Operation Failed

    Linux虚拟主机通过FTP软件创建目录时提示550 Create Directory Operation Failed

  • Android 浏览器内核浅谈[通俗易懂]

    Android 浏览器内核浅谈[通俗易懂]目前,移动设备浏览器上常用的内核有Webkit,Blink,Trident,Gecko等,其中iPhone和iPad等苹果iOS平台主要是WebKit,Android 4.4之前的android系统浏览器内核是WebKit,Android4.4系统浏览器切换到了Chromium(内核是Webkit的分支Blink),WindowsPhone8系统浏览器内核是Trident。 1.W

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号