最近我发现了一个非常nice的部署网站的工具, railway,这个网站是国外的,所以部署出来的项目域名是国外的,并不需要担心封号,也不需要进行域名注册,部署成功之后会自动生成域名,在国内就能够正常访问,部署的时间越长,访问的速度就越快,大家赶紧去试试呀~~~
以我的例子: 部署一个Vite+Vue3+Vant的项目, react项目也一样,今天教大家部署前端服务,之前的文章中注明了后端服务的注意事项,欢迎大家观看。
这是一个适用于开发移动端的模板,也欢迎大家帮我点赞呀
github地址: https://github.com/bluelightsky/vue3-h5-template
注意命令
1.默认启动命令
yarn buildyarn start
所以确保package.json中存在这两个命令, 以vite构建为例,scripts中包含如下命令
注意start需要启动一个服务,所以是”npx http-server ./dist”
npm run build命令执行之后, 其实就是把项目所需的代码打包成了静态资源, 但是能够在网上看到这些网页, 还需要启动一个http或者https服务, 这样才能够根据ip地址或者域名来访问这些静态资源
"scripts": { "dev": "vite --mode dev", "start": "npx http-server ./dist", "build": "vite build", "build:dev": "vite build --mode dev -c vite.config.ts", "preview": "vite preview", "server": "live-server ./ --port=8081", "deploy": "bash deploy.sh", "lint": "eslint . --ext ts,vue,js --quiet --fix", "prettier": "prettier --config .prettierrc.js --write {**/*,*}.{js,ts,vue}" },
2.详细部署步骤
2.1进入首页:
https://railway.app/
2.2创建一个新的project
进入面板, 没有project, 需要创建一个新的project
https://railway.app/dashboard
2.3新建一个服务
然后新建一个服务
这里你可以选择github项目
选择自己的GitHub仓库, 当你设置主分支, 当主分支的代码发生变化时, 会自动更新部署项目, 也就是说不需要你手动再次部署, 是不是很自动和人性化
选择项目之后, 你就会发现, 自动执行build命令了
你点击这个卡片, 之后就是正常部署中
2.4 设置环境变量
当然这里你可以设置环境变量
部署成功之后就是这样的
2.5设置主分支
你也可以设置, 设置主分支, 就是这个分支代码发生变化, 就执行部署, 当然你也可以禁止它自动部署项目
2.6查看网站的数据
这里你可以查看网站的数据和流量
3.其他项目部署
可以看官方文档中有官方例子
https://docs.railway.app/
template中有很大模板, 可以直接使用
https://railway.app/templates
好了, 今天分享就到这里, 希望对大家有所帮助