|
| 1 | +## Vercel Deployment Guide |
| 2 | + |
| 3 | +### Deployment Method Comparison |
| 4 | + |
| 5 | +| Deployment Method | Advantages | Disadvantages | |
| 6 | +|---------|------|------| |
| 7 | +| One-click Deployment | Quick and convenient, no additional setup required | Cannot automatically sync updates from the source project | |
| 8 | +| Fork and Import | Can track source project updates, easier to maintain | First deployment requires manual root directory fix to enable Vercel proxy functionality | |
| 9 | + |
| 10 | +### Recommended Method: Fork the Project and Import to Vercel (Recommended) |
| 11 | + |
| 12 | +This method allows you to track project updates, making it easier to sync the latest features and bug fixes. |
| 13 | + |
| 14 | +1. **Fork the project to your GitHub account** |
| 15 | + - Visit the [prompt-optimizer project](https://github.com/linshenkx/prompt-optimizer) |
| 16 | + - Click the "Fork" button in the top right corner |
| 17 | + - After completing the fork operation, you will have a copy of this project under your GitHub account |
| 18 | + |
| 19 | +2. **Import the project to Vercel** |
| 20 | + - Log in to the [Vercel platform](https://vercel.com/) |
| 21 | + - Click "Add New..." → "Project" |
| 22 | + - Find your forked project in the "Import Git Repository" section and click "Import" |
| 23 | + - Configure the project (**Note**: Although you can set the root directory here, it is ineffective for multi-module projects and will still require manual fixing later) |
| 24 | + - Click "Deploy" to start deployment |
| 25 | + |
| 26 | +  |
| 27 | + |
| 28 | +3. **Fix the root directory setting (Strongly recommended)** |
| 29 | + - When deployed through import, although the project's `vercel.json` file already contains related fixes to make basic functionality work |
| 30 | + - To enable **Vercel proxy functionality** (a key feature for solving cross-origin issues), you need to manually fix the root directory: |
| 31 | + |
| 32 | + a. After the project is deployed, go to project settings |
| 33 | + |
| 34 | + b. Click "Build and Deployment" in the left menu |
| 35 | + |
| 36 | + c. In the "Root Directory" section, **clear** the content in the input box |
| 37 | + |
| 38 | + d. Click "Save" to save the settings |
| 39 | + |
| 40 | +  |
| 41 | + |
| 42 | +4. **Redeploy the project** |
| 43 | + - After saving the settings, you need to manually trigger a redeployment to make the fix effective |
| 44 | + - Click "Deployments" in the top navigation bar |
| 45 | + - On the right side of the latest deployment record, click the "..." button |
| 46 | + - Select the "Redeploy" option to trigger redeployment |
| 47 | + |
| 48 | +  |
| 49 | + |
| 50 | +5. **Configure environment variables (Optional)** |
| 51 | + - After deployment is complete, go to project settings |
| 52 | + - Click "Environment Variables" |
| 53 | + - Add the required API keys (e.g., `VITE_OPENAI_API_KEY`) |
| 54 | + - Redeploy the project to make the environment variables effective |
| 55 | + |
| 56 | +6. **Sync upstream updates** |
| 57 | + - Open your forked project on GitHub |
| 58 | + - If there are updates, it will show "This branch is X commits behind linshenkx:main" |
| 59 | + - Click the "Sync fork" button to sync the latest changes |
| 60 | + - Vercel will automatically detect code changes and redeploy |
| 61 | + |
| 62 | +### Alternative Method: One-click Deployment to Vercel |
| 63 | + |
| 64 | +If you only need quick deployment and don't care about subsequent updates, you can use the one-click deployment method: |
| 65 | + |
| 66 | +1. Click the button below to deploy directly to Vercel |
| 67 | + [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flinshenkx%2Fprompt-optimizer) |
| 68 | + |
| 69 | +2. Follow Vercel's guidance to complete the deployment process |
| 70 | + |
| 71 | + **Advantage:** With one-click deployment, Vercel can automatically correctly identify the root directory, no manual fixing required, and all features (including Vercel proxy) can work normally. |
| 72 | + |
| 73 | +### About Vercel Proxy Functionality |
| 74 | + |
| 75 | +Prompt Optimizer supports using Edge Runtime proxy to solve cross-origin issues when deployed on Vercel. |
| 76 | + |
| 77 | +1. **Confirm proxy functionality is available** |
| 78 | + - If using one-click deployment: proxy functionality should be directly available |
| 79 | + - If using import deployment: you need to complete the "Fix root directory setting" and "Redeploy" steps mentioned above |
| 80 | + - Open "Model Management" in the application |
| 81 | + - Select the target model -> "Edit", at this point you should see the "Use Vercel Proxy" option |
| 82 | + - If you don't see this option, it means the Vercel Function is not correctly deployed, please check the root directory setting |
| 83 | + |
| 84 | +2. **Enable proxy functionality** |
| 85 | + - Check the "Use Vercel Proxy" option |
| 86 | + - Save the configuration |
| 87 | + |
| 88 | +3. **Proxy principle** |
| 89 | + - Request flow: Browser → Vercel Edge Runtime → Model service provider |
| 90 | + - Solves the cross-origin limitation when browsers directly access APIs |
| 91 | + - Proxy functionality is based on Vercel Function implementation, dependent on the `/api` path |
| 92 | + |
| 93 | +4. **Notes** |
| 94 | + - Some model service providers may restrict requests from Vercel |
| 95 | + - If restrictions are encountered, it is recommended to use a self-deployed API relay service |
| 96 | + |
| 97 | +### Common Issues |
| 98 | + |
| 99 | +1. **Blank page or error after deployment** |
| 100 | + - Check if environment variables are correctly configured |
| 101 | + - View Vercel deployment logs to find the cause of errors |
| 102 | + |
| 103 | +2. **Cannot connect to model API** |
| 104 | + - Confirm the API key is correctly configured |
| 105 | + - Try enabling Vercel proxy functionality |
| 106 | + - Check if the model service provider restricts Vercel requests |
| 107 | + |
| 108 | +3. **"Use Vercel Proxy" option not displayed** |
| 109 | + - If using import deployment: check if you have cleared the root directory setting and redeployed |
| 110 | + - Verify if the `/api/vercel-status` path is accessible (you can test by visiting `your-domain/api/vercel-status` in a browser) |
| 111 | + - Check if there are any Function-related error messages in the deployment logs |
| 112 | + |
| 113 | +4. **How to update a deployed project** |
| 114 | + - If forked and imported: sync the fork and wait for automatic deployment |
| 115 | + - If one-click deployed: need to redeploy the new version (cannot automatically track source project updates) |
| 116 | + |
| 117 | +5. **How to add a custom domain** |
| 118 | + - Select "Domains" in the Vercel project settings |
| 119 | + - Add and verify your domain |
| 120 | + - Follow the guidance to configure DNS records |
0 commit comments