|
| 1 | +--- |
| 2 | +title: Deploy your Astro Site to DigitalOcean |
| 3 | +description: How to deploy your Astro site to the web on DigitalOcean. |
| 4 | +sidebar: |
| 5 | + label: DigitalOcean |
| 6 | +type: deploy |
| 7 | +i18nReady: true |
| 8 | +--- |
| 9 | +import ReadMore from '~/components/ReadMore.astro'; |
| 10 | +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; |
| 11 | +import { Steps } from '@astrojs/starlight/components'; |
| 12 | + |
| 13 | +[DigitalOcean](https://www.digitalocean.com/) offers multiple hosting options for web applications and static websites, including App Platform, Spaces, and Droplets. Any Astro site can be hosted on DigitalOcean! |
| 14 | + |
| 15 | +This guide includes instructions for deploying to DigitalOcean using App Platform, which is the recommended approach for most Astro sites. |
| 16 | + |
| 17 | +## Project configuration |
| 18 | + |
| 19 | +Your Astro project can be deployed to DigitalOcean in different ways depending on your needs: |
| 20 | + |
| 21 | +### Static site |
| 22 | + |
| 23 | +Your Astro project is a static site by default. DigitalOcean App Platform offers direct static site hosting. Configure your app as a "Static Site" resource type. This allows DigitalOcean to serve your static files directly using the default settings without requiring additional packages or custom configuration. |
| 24 | + |
| 25 | +### Server-Side Rendering (SSR) |
| 26 | + |
| 27 | +For Server-Side Rendering, you'll need to configure your Astro project for SSR. Configure your app as a "Web Service" resource type. This allows DigitalOcean to deploy your app with Server-Side Rendering. |
| 28 | + |
| 29 | +## How to deploy |
| 30 | + |
| 31 | +You can deploy to DigitalOcean App Platform through the website UI or using DigitalOcean's CLI (`doctl`). The process works for both static and Server-Side Rendered Astro sites. In this guide, we will only cover using the [DigitalOcean Control Panel](https://cloud.digitalocean.com/). For more information about the CLI, visit the official documentation: [doctl Command Line Interface (CLI)](https://docs.digitalocean.com/reference/doctl/). |
| 32 | + |
| 33 | +### Web Application Deployment |
| 34 | + |
| 35 | +If your project is stored in GitHub, GitLab, or Bitbucket, you can use the DigitalOcean App Platform to deploy your Astro site. |
| 36 | +<br /> |
| 37 | + |
| 38 | +<em>**Naming:** There are two names you will see in the next steps. There is the name of the overall `App Platform`, and the name of the `Web Application`.</em> |
| 39 | +<br /> |
| 40 | +<em>**Note:** You can also deploy using Docker Containers. For more information, please follow the [How to Deploy from Container Images Guide from DigitalOcean](https://docs.digitalocean.com/products/app-platform/how-to/deploy-from-container-images/).</em> |
| 41 | +<br /> |
| 42 | +<br /> |
| 43 | + |
| 44 | +<Steps> |
| 45 | +1. [Sign up](https://m.do.co/c/e70457dcb5b6) for an account if you don't have one already. |
| 46 | + - Log in to your [DigitalOcean Control Panel](https://cloud.digitalocean.com/) if you already have an account. |
| 47 | + - <em>Note: The above signup link is a referral link; it costs nothing but provides you with a free $200 credit for 60 days to try out DigitalOcean. If you spend $25 after your credits expire, the referrer gets $25 as well. Please use if you'd like, or don't if you don't. [Here](https://cloud.digitalocean.com/registrations/new) is a direct signup link if you'd prefer it.</em> |
| 48 | + <br /> |
| 49 | + |
| 50 | +2. Open the dropdown menu in the top right header called `Create` click `App Platform`. |
| 51 | + |
| 52 | +3. Choose <kbd>GitHub</kbd>, <kbd>GitLab</kbd>, or <kbd>Bitbucket</kbd> as your source. |
| 53 | + |
| 54 | +4. Select your Astro repository from the list. |
| 55 | + |
| 56 | +5. Choose Source: |
| 57 | + - **Repository:** Select your Repository. |
| 58 | + - **Branch:** Select which Branch to deploy (main/ master by default.) |
| 59 | + - **Source directories (Optional):** DigitalOcean detects it by default, but you can also manually input a route. |
| 60 | + - **Autodeploy:** Select whether or not the application should be re-deployed each time an update is made to the branch. (Recommended) |
| 61 | + <br /> |
| 62 | + |
| 63 | +6. Review and configure resource settings: |
| 64 | + - **Info:** Edit Name and Resource Type. |
| 65 | + - **Name:** Enter the web application name. |
| 66 | + - **Resource Type:** Choose `Static Site` for static Astro sites, or `Web Service` for SSR. |
| 67 | + - **Size (Only for Web Service):** Select instances and containers to use. |
| 68 | + - **Instance size:** Select the instance type to use. |
| 69 | + - **Containers:** Select how many of the instances to run. |
| 70 | + - <em>Note: It is recommended to run the lowest-spec instance needed and scale up as needed. If using dedicated instances, you can also enable autoscaling to scale as needed.</em> |
| 71 | + - **Deployment settings:** Enter the Build command and Output directory. |
| 72 | + - **Build command:** `astro build` |
| 73 | + - **Output directory:** Enter the output directory (`dist` is the output directory in Astro by default, but you can leave it blank and let DigitalOcean should detect it automatically. It is recommended to enter it manually.) |
| 74 | + - **Network:** |
| 75 | + - **Public HTTP port (Only in Web Service):** Public port. (Do not change unless you know what you are doing.) |
| 76 | + - **Internal ports (Only in Web Service):** Internal communication ports. (Do not add anything unless required and you know what you are doing. **Can introduce security risks.**) |
| 77 | + - **HTTP request routes:** Routing routes. (Do not change unless you know what you are doing.) |
| 78 | + - **App-level environment variables:** Variables accessible by all resources in the app (Do not change unless you know what you are doing.) |
| 79 | + - **Datacenter Region:** |
| 80 | + - **Choose a datacenter region:** Choose the region closest to the average user. The further the region, the longer the load time. |
| 81 | + - **Connect app to VPC network:** Virtual Private Cloud network. (Off by default; do not change unless you know what you are doing.) |
| 82 | + - **Finalize:** Enter your App Platform name, and which Project this Applications should be within. |
| 83 | + <br /> |
| 84 | + |
| 85 | +7. Review your configuration and click `Create app`. <br /> |
| 86 | + DigitalOcean will now automatically build and deploy your app. |
| 87 | +</Steps> |
| 88 | + |
| 89 | +To change any of the configuration settings, go to <kbd>Settings</kbd>, select the Component you would like to reconfigure, and edit as appropriate. |
| 90 | + |
| 91 | +Any future changes to your source branch will trigger automatic deployments if Autodeploy is enabled. By default, DigitalOcean will notify you by email if there are any failed deployments. This, and many other settings can be changed in the <kbd>Settings</kbd> tab within the App. |
| 92 | + |
| 93 | +Congratulations! You have deployed your Web Application on DigitalOcean. |
| 94 | + |
| 95 | +## Additional Resources |
| 96 | +- [DigitalOcean Docs](https://docs.digitalocean.com/) |
| 97 | +- [DigitalOcean Discord](https://discord.com/invite/digitalocean) |
| 98 | + |
| 99 | +## Troubleshooting |
| 100 | +<Steps> |
| 101 | +1. Run the following commands to ensure that the applications Builds and Deploys properly on your local machine: |
| 102 | + <PackageManagerTabs> |
| 103 | + <Fragment slot="npm"> |
| 104 | + ```shell |
| 105 | + npm run build |
| 106 | + npm run preview |
| 107 | + ``` |
| 108 | + </Fragment> |
| 109 | + <Fragment slot="pnpm"> |
| 110 | + ```shell |
| 111 | + pnpm run build |
| 112 | + pnpm run preview |
| 113 | + ``` |
| 114 | + </Fragment> |
| 115 | + <Fragment slot="yarn"> |
| 116 | + ```shell |
| 117 | + yarn run build |
| 118 | + yarn run preview |
| 119 | + ``` |
| 120 | + </Fragment> |
| 121 | + </PackageManagerTabs> |
| 122 | + You should be able to view your application locally. If it is working here, then your application should not be the issue, and the issue lies in the DigitalOcean configuration. |
| 123 | + |
| 124 | +2. Check to ensure your configuration is correct. |
| 125 | + - Did you enter the correct Build command? |
| 126 | + - Did you enter the correct Output Directory? |
| 127 | + - Are you building the latest Application? |
| 128 | + - Are you using the correct HTTP Request Routes? |
| 129 | + |
| 130 | + Ensure to read through the <kbd>Build</kbd> and <kbd>Deploy</kbd> logs and check if there are any issues. There may be hints as to the issue even if it builds and deploys successfully. |
| 131 | +</Steps> |
| 132 | + |
| 133 | +## Full server management - DigitalOcean Droplets |
| 134 | + |
| 135 | +For more control over your server environment, you can deploy to a [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets). Read the [documentation](https://docs.digitalocean.com/products/droplets/) for more information. |
0 commit comments