railway部署前端服务

railway部署前端服务

以我的例子: 部署一个Vite+Vue3+Vant的项目, react项目也一样

github地址: github.com/bluelightsk…

1.默认启动命令

yarn build

yarn 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.详细部署步骤

1-进入首页:

railway.app/

2-创建一个新的project

进入面板, 没有project, 需要创建一个新的project

railway.app/dashboard

3-新建一个服务

然后新建一个服务

这里你可以选择github项目

选择自己的GitHub仓库, 当你设置主分支, 当主分支的代码发生变化时, 会自动更新部署项目, 也就是说不需要你手动再次部署, 是不是很自动和人性化

选择项目之后, 你就会发现, 自动执行build命令了

你点击这个卡片, 之后就是正常部署中

4-设置环境变量

当然这里你可以设置环境变量

部署成功之后就是这样的

5-设置主分支

你也可以设置, 设置主分支, 就是这个分支代码发生变化, 就执行部署, 当然你也可以禁止它自动部署项目

6-查看网站的数据和流量

这里你可以查看网站的数据和流量

其他项目部署

可以看官方文档中有官方例子

docs.railway.app/

template中有很大模板, 可以直接使用

railway.app/templates

好了, 今天分享就到这里, 希望对大家有所帮助

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!