|
| 1 | +import { Callout, Steps } from 'nextra/components'; |
| 2 | + |
| 3 | +# Deploy LobeChat with Netlify |
| 4 | + |
| 5 | +If you want to deploy LobeChat on Netlify, you can follow these steps: |
| 6 | + |
| 7 | +## Deploy LobeChat with Netlify |
| 8 | + |
| 9 | +<Steps> |
| 10 | + |
| 11 | +### Fork the LobeChat Repository |
| 12 | + |
| 13 | +Click the Fork button to fork the LobeChat repository to your GitHub account. |
| 14 | + |
| 15 | +### Prepare your OpenAI API Key |
| 16 | + |
| 17 | +Go to [OpenAI API Key](https://platform.openai.com/account/api-keys) to obtain your OpenAI API Key. |
| 18 | + |
| 19 | +### Import to Netlify Workspace |
| 20 | + |
| 21 | +<Callout> |
| 22 | + After testing, it is currently not supported to have a one-click deployment button similar to |
| 23 | + Vercel/Zeabur. The reason is unknown. Therefore, manual import is required. |
| 24 | +</Callout> |
| 25 | + |
| 26 | +Click "Import from git" |
| 27 | + |
| 28 | +<Image |
| 29 | + alt={'Click "Import from git" in the Netlify workspace'} |
| 30 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/31b999e5-2a74-45fc-935b-f036e72a684d'} |
| 31 | + bordered |
| 32 | + inStep |
| 33 | + height={362} |
| 34 | +/> |
| 35 | + |
| 36 | +Then click "Deploy with Github" and authorize Netlify to access your GitHub account. |
| 37 | + |
| 38 | +<Image |
| 39 | + alt={'Authorize Netlify to access your GitHub account'} |
| 40 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/c9c58141-5ec6-43f1-8d97-0a84a04dcdba'} |
| 41 | + bordered |
| 42 | + inStep |
| 43 | + height={273} |
| 44 | +/> |
| 45 | + |
| 46 | +Next, select the LobeChat project: |
| 47 | + |
| 48 | +<Image |
| 49 | + alt={'Select the LobeChat github project'} |
| 50 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/6c3968a8-fbbb-4268-a587-edaced2d96af'} |
| 51 | + bordered |
| 52 | + inStep |
| 53 | + height={228} |
| 54 | +/> |
| 55 | + |
| 56 | +### Configure Site Name and Environment Variables |
| 57 | + |
| 58 | +In this step, you need to configure your site, including the site name, build command, and publish directory. Fill in your site name in the "Site Name" field. If there are no special requirements, you do not need to modify the remaining configurations as we have already set the default configurations. |
| 59 | + |
| 60 | +<Image |
| 61 | + alt={'Configure LobeChat site name'} |
| 62 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/f3885537-6d43-422f-b1b8-e70732401025'} |
| 63 | + bordered |
| 64 | + inStep |
| 65 | + height={712} |
| 66 | +/> |
| 67 | + |
| 68 | +Click the "Add environment variables" button to add site environment variables: |
| 69 | + |
| 70 | +<Image |
| 71 | + alt={'Add LobeChat site environment variables'} |
| 72 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/3b607482-4d99-455a-bc10-3090dd4fe3c5'} |
| 73 | + bordered |
| 74 | + inStep |
| 75 | + height={537} |
| 76 | +/> |
| 77 | + |
| 78 | +Taking OpenAI as an example, the environment variables you need to add are as follows: |
| 79 | + |
| 80 | +| Environment Variable | Type | Description | Example | |
| 81 | +| --- | --- | --- | --- | |
| 82 | +| `OPENAI_API_KEY` | Required | This is the API key you applied for on the OpenAI account page | `sk-xxxxxx...xxxxxx` | |
| 83 | +| `ACCESS_CODE` | Required | Add a password to access this service. You can set a long password to prevent brute force attacks. When this value is separated by commas, it becomes an array of passwords | `awCT74` or `e3@09!` or `code1,code2,code3` | |
| 84 | +| `OPENAI_PROXY_URL` | Optional | If you manually configure the OpenAI interface proxy, you can use this configuration to override the default OpenAI API request base URL | `https://aihubmix.com/v1`, default value: `https://api.openai.com/v1` | |
| 85 | + |
| 86 | +<Callout type={'info'}> |
| 87 | + For a complete list of environment variables supported by LobeChat, please refer to the [📘 |
| 88 | + Environment Variables](/en/self-hosting/environment-variables) |
| 89 | +</Callout> |
| 90 | + |
| 91 | +Afteradding the variables, finally click "Deploy lobe-chat" to enter the deployment phase |
| 92 | + |
| 93 | +<Image |
| 94 | + alt={'Environment variables added'} |
| 95 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/c9f74ec4-ce63-4ce9-b9e2-34bda6fda10b'} |
| 96 | + bordered |
| 97 | + inStep |
| 98 | + height={600} |
| 99 | +/> |
| 100 | + |
| 101 | +### Wait for Deployment to Complete |
| 102 | + |
| 103 | +After clicking deploy, you will enter the site details page, where you can click the "Deploying your site" in blue or the "Building" in yellow to view the deployment progress. |
| 104 | + |
| 105 | +<Image |
| 106 | + alt={'Netlify site details page'} |
| 107 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/a7fd85d5-fd32-4756-814e-ff7ab7567fe1'} |
| 108 | + bordered |
| 109 | + inStep |
| 110 | + height={396} |
| 111 | +/> |
| 112 | + |
| 113 | +Upon entering the deployment details, you will see the following interface, indicating that your LobeChat is currently being deployed. Simply wait for the deployment to complete. |
| 114 | + |
| 115 | +<Image |
| 116 | + alt={'LobeChat deployment in progress'} |
| 117 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/1ed8b13d-046e-47c8-bd61-116ffdf5d01b'} |
| 118 | + bordered |
| 119 | + inStep |
| 120 | + height={325} |
| 121 | +/> |
| 122 | + |
| 123 | +During the deployment and build process: |
| 124 | + |
| 125 | +<Image |
| 126 | + alt={'Deployment in progress'} |
| 127 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/1c82d707-cb6f-4924-b246-a5235a919864'} |
| 128 | + bordered |
| 129 | + inStep |
| 130 | + height={558} |
| 131 | +/> |
| 132 | + |
| 133 | +### Deployment Successful, Start Using |
| 134 | + |
| 135 | +If your Deploy Log in the interface looks like the following, it means your LobeChat has been successfully deployed. |
| 136 | + |
| 137 | +<Image |
| 138 | + alt={'Deployment Successful'} |
| 139 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/c1f945d1-f3e2-4100-b6bb-24d4cb13c438'} |
| 140 | + bordered |
| 141 | + inStep |
| 142 | + height={558} |
| 143 | +/> |
| 144 | +At this point, you can click on "Open production deploy" to access your LobeChat site. |
| 145 | + |
| 146 | +<Image |
| 147 | + alt={'Access Your LobeChat Site'} |
| 148 | + src={'https://github.com/lobehub/lobe-chat/assets/28616219/b04723eb-64ad-4028-a901-dc4e4ee2d0c1'} |
| 149 | + bordered |
| 150 | + inStep |
| 151 | + height={527} |
| 152 | +/> |
| 153 | + |
| 154 | +</Steps> |
| 155 | + |
| 156 | +## Set up Custom Domain (Optional) |
| 157 | + |
| 158 | +You can use the subdomain provided by Netlify, or choose to bind a custom domain. Currently, the domain provided by Netlify has not been contaminated, and can be accessed directly in most regions. |
| 159 | + |
| 160 | +[//]: # '[![][deploy-button-image]][deploy-link]' |
| 161 | +[//]: # '[deploy-button-image]: https://www.netlify.com/img/deploy/button.svg' |
| 162 | +[//]: # '[deploy-link]: https://app.netlify.com/start/deploy?repository=https://github.com/lobehub/lobe-chat' |
| 163 | +[//]: # '### 授权 Netlify 访问你的 GitHub 账号' |
| 164 | +[//]: # '点击 「Connect to GitHub」，授权 Netlify 访问你的 GitHub 账号：' |
| 165 | +[//]: # 'Image' |
| 166 | +[//]: # 'github.com/lobehub/lobe-chat/assets/28616219/8ee533d5-f7e9-4523-991b-2c23a72c1530' |
| 167 | +[//]: # ' bordered' |
| 168 | +[//]: # ' width={790}' |
| 169 | +[//]: # ' height={556}' |
| 170 | +[//]: # '/>' |
0 commit comments