|
| 1 | +--- |
| 2 | +description: Self-host Openblocks on Heroku quickly with one-click deployment. |
| 3 | +--- |
| 4 | + |
| 5 | +# Heroku |
| 6 | + |
| 7 | +## Deploy |
| 8 | + |
| 9 | +1. [Sign up](https://signup.heroku.com/) for a new Heroku account, or [log in](https://id.heroku.com/login) to get started. |
| 10 | +2. Click to start Heroku [one-click deployment](https://heroku.com/deploy?template=https://github.com/openblocks-dev/openblocks). |
| 11 | +3. Set the **App name** which will be part of the app URL later, and choose a region. |
| 12 | + |
| 13 | + <figure><img src="../.gitbook/assets/heroku-1.png" alt=""><figcaption></figcaption></figure> |
| 14 | +4. (Not required) Fill in the **Config Vars** according to descriptions. These are all optional variables used for environment-specific configuration. You can skip this step and [manage environment variables](heroku.md#manage-environment-variables) later. |
| 15 | + |
| 16 | + <figure><img src="../.gitbook/assets/heroku-2.png" alt=""><figcaption></figcaption></figure> |
| 17 | +5. Click the **Deploy app** button. |
| 18 | + |
| 19 | +It usually takes around three minutes to start the app. |
| 20 | + |
| 21 | +<figure><img src="../.gitbook/assets/heroku-3.png" alt=""><figcaption></figcaption></figure> |
| 22 | + |
| 23 | +Click the **View** button to open the new app, which should be available at **https://your\_app\_name.herokuapp.com/**. |
| 24 | + |
| 25 | +<figure><img src="../.gitbook/assets/heroku-4.png" alt=""><figcaption></figcaption></figure> |
| 26 | + |
| 27 | +In the welcome page, Click **Sign up** to get started. Openblocks will automatically create a workspace for you. Then you can start building your apps and invite members to your workspace. |
| 28 | + |
| 29 | +<figure><img src="../.gitbook/assets/heroku-5.png" alt=""><figcaption></figcaption></figure> |
| 30 | + |
| 31 | +## Configure app settings |
| 32 | + |
| 33 | +On [Heroku Dashboard](https://dashboard.heroku.com/apps), go to the **Settings** tab at the top to configure app settings. |
| 34 | + |
| 35 | +<figure><img src="../.gitbook/assets/heroku-6.png" alt=""><figcaption></figcaption></figure> |
| 36 | + |
| 37 | +### Manage environment variables |
| 38 | + |
| 39 | +You can manage environment variables of your app in the **Config Vars** section. |
| 40 | + |
| 41 | +<figure><img src="../.gitbook/assets/heroku-7.png" alt=""><figcaption></figcaption></figure> |
| 42 | + |
| 43 | +{% hint style="info" %} |
| 44 | +For more help, see [Managing config vars](https://devcenter.heroku.com/articles/config-vars#managing-config-vars). |
| 45 | +{% endhint %} |
| 46 | + |
| 47 | +### Install SSL Certificates |
| 48 | + |
| 49 | +You can configure SSL Certificates of your app in the **SSL Certificates** section. Heroku provides [Automated Certificate Management (ACM)](https://devcenter.heroku.com/articles/automated-certificate-management) and [Manual Certificate](https://devcenter.heroku.com/articles/ssl#manually-uploading-certificates-and-intermediaries) options. |
| 50 | + |
| 51 | +<figure><img src="../.gitbook/assets/heroku-8.png" alt=""><figcaption></figcaption></figure> |
| 52 | + |
| 53 | +Choose **Manual Certificate**, and you can install your SSL Certificates. Public certificate file usually ends in `.pem` or `.crt`.\ |
| 54 | + |
| 55 | + |
| 56 | +### Customize domain names |
| 57 | + |
| 58 | +1. Click the **Add domain** button in the **Domains** section. |
| 59 | + |
| 60 | + <figure><img src="../.gitbook/assets/heroku-10.png" alt=""><figcaption></figcaption></figure> |
| 61 | +2. Fill in your **Domain name** and click **Next**.\ |
| 62 | +  |
| 63 | +3. Copy and paste the **DNS Target** provided by Heroku to complete the domain setup. |
| 64 | + |
| 65 | +{% hint style="info" %} |
| 66 | +For more help, see [Custom Domain Names for Apps](https://devcenter.heroku.com/articles/custom-domains). |
| 67 | +{% endhint %} |
| 68 | + |
| 69 | +## Update using Heroku CLI |
| 70 | + |
| 71 | +You can use [Heroku CLI](https://devcenter.heroku.com/categories/command-line) to update your Docker image to the latest version. The basic logic behind the following steps is to pull the newest code from GitHub repository, build an image locally using Docker engine, and deploy the updated image using Heroku CLI. Before you start, make sure you have [Heroku CLI](https://devcenter.heroku.com/categories/command-line) and [Docker](https://www.docker.com/) installations locally(required). |
| 72 | + |
| 73 | +1\. Get the latest code by cloning the `openblocks-dev/openblocks` repository from GitHub. |
| 74 | + |
| 75 | +```bash |
| 76 | +git clone https://github.com/openblocks-dev/openblocks.git |
| 77 | +``` |
| 78 | + |
| 79 | +2\. Move to the `heroku` folder. |
| 80 | + |
| 81 | +```bash |
| 82 | +cd openblocks/deploy/heroku |
| 83 | +``` |
| 84 | + |
| 85 | +3\. Log in to Heroku CLI. |
| 86 | + |
| 87 | +```bash |
| 88 | +heroku login |
| 89 | +``` |
| 90 | + |
| 91 | +4\. Make sure you have a Docker engine running locally. Then log in to Container Registry. |
| 92 | + |
| 93 | +```bash |
| 94 | +heroku container:login |
| 95 | +``` |
| 96 | + |
| 97 | +5\. Get the app name of your Heroku account. |
| 98 | + |
| 99 | +```bash |
| 100 | +heroku apps |
| 101 | +``` |
| 102 | + |
| 103 | +6\. Build the image and push it to Container Registry. |
| 104 | + |
| 105 | +```bash |
| 106 | +heroku container:push web -a your_app_name |
| 107 | +``` |
| 108 | + |
| 109 | +7\. Release the image to your app. |
| 110 | + |
| 111 | +```bash |
| 112 | +heroku container:release web -a your_app_name |
| 113 | +``` |
| 114 | + |
| 115 | +It might take a few minutes to build the new image and push it to Heroku. Then you can open the app in your browser to check if it is running. |
| 116 | + |
| 117 | +```bash |
| 118 | +heroku open -a your_app_name |
| 119 | +``` |
0 commit comments