现代实战 Hello World

原因

现代开发架构一般是前端与后端分离，中间用标准的api连接，特别是集成其他系统，比如公众号之类。好处是可以随时替换，不受现有的代码束缚，也可以轻松调用异构系统（不同语言，不同平台，不同公司等），坏处就是在调试的时候会比较麻烦，要进行前后端联调，另外就是开始创建架构的时候比较复杂。这里就是用尽可能简单的方法创建出一个现代的 Hello World

前提

环境：Mac 14+，nodejs 20.10 LTS ，PHP 8.2 ，composer , brew

目录结构：~/Code 为主目录，子目录：hello-ui (前端) , hello-service (后端)

账号： gitlab 或 github ， vercel，ngrok.com

特点

• 现代开发架构，用于实战也不会落后
• 全免费（除了自己的上网费）
• 全https域名
• 不需要租用或购买服务器，本地就可以跑服务，方便调试

重点提示

域名：https://api.ngrok ，https://ui.vercel 替换为自己生成的域名

本地域名： http://hello-service.test 可以替换为自己的本地域名

所有内容在 Mac上可用，如果用Windows 少数要转成不同的命令

步骤

• 设定ngrok

• • 登录 ngrok.com
  • 设定固定域名: Cloud Edge -> Domains -> New Domain ，会生成一个固定域名，一般来说是 ngrok-free.app 结尾的，当然了，如果要定制域名就要付费了，自己调试只要固定域名就行了。
  • 这个固定域名就是互联网上可以访问到的域名，自带 https 挺不错的。
  • 后面都会用到这个固定域名，假设这个固定域名是 https://api.ngrok
• 创建 hello-ui
  • fork 或下载 项目概览 - hello-ui - GitCode
  • 上传到自己的 gitlab/github 账号

• 发布到 vercel
  • 登录后连接 gitlab/github ，选择 hello-ui，然后会自动发布
  • 设定 NEXT_PUBLIC_API_BASE_URL，内容就是 ngrok 设定的固定域名 https://api.ngrok
  • 发布后会生成一个域名，这个就是前端的主域名，假设这个域名是 https://ui.vercel
• 创建 hello-service
  • fork 或下载 项目概览 - hello-service - GitCode
  • 上传到自己的 gitlab/github 账号
• 启动本地服务
  • 下载和安装：Laravel Herd
  • 这个设定很简单，只要把 ~/Code 加入就行，就是 hello-service的父目录
  • 启动 herd 会自动生成 http://hello-service.test 本地域名
  • 平替：valet 或者 sail
    • 安装 valet: Laravel Valet - Laravel 10.x - The PHP Framework For Web Artisans
      • 安装 brew
      • brew install php@8.2
      • composer global require laravel/valet
      • valet install
      • valet use php@8.2
      • 在~/Code执行 valet park ，就会自动把下面所有的目录都加入域名
      • 仍然是会生成 http://hello-service.test 本地域名
    • 安装 sail: Laravel Sail - Laravel 10.x - The PHP Framework For Web Artisans
• 创建 hello-db
  • 下载和安装：PostgreSQL: The world's most advanced open source database 或 MySQL
  • 创建db和user，假设这里的 dbname是 hellodb, user是 hellouser，密码是 123456
  • 客户端：可以用 dbeaver
  • 参考：项目概览 - hello-db - GitCode
• hello-service 初始化数据
  • 初始化数据库： php artisan migrate
  • 初始化数据（包括登录账号）：php artisan db:seed
• hello-service 设定CORS
  • CORS 原理：根据发起域名进行安全审查
    • 安全审查：设定在config/cors.php，域名，方法，具体的uri等
    • 发起域名：一般来自 referrer，如果发起域名与api当前域名不同，就需要安全审查
  • Laravel 10.x 已经内置CORS，直接可以设定 config/cors.php
    • allowed_origins: 把需要认证的域名都加上，比如vercel 生成的前端主域名
    • supports_credentials: 使用token模式就可以关掉这个，设为false
• ngrok 穿透内网
  • 安装 brew install ngrok/ngrok/ngrok
  • 设定 auth token : ngrok config add-authtoken
  • 启动：ngrok http --host-header=hello-service.test --domain=api.ngrok 80
• 调试
  • 打开 vercel 的域名 https://ui.vercel
  • 尝试登录
  • CORS: 如果console里出现 CORS 的错误，就要检查 config/cors.php 的设定
  • 如果是密码错误，则要检查是否初始化数据

参考

hello-service: 创建hello-service-CSDN博客

hello-db: 创建 hello-db-CSDN博客

hello-ui: 创建 hello-ui-CSDN博客