Ben Lambert
+101
-34
@@ -5,40 +5,37 @@ sidebar_label: Heroku
|
||||
description: How to deploy Backstage to Heroku
|
||||
---
|
||||
|
||||
Heroku is a Platform as a Service (PaaS) designed to handle application
|
||||
deployment in a hands-off way. Heroku supports container deployment of Docker
|
||||
images, a natural fit for Backstage.
|
||||
Heroku is a Platform as a Service (PaaS) designed to simplify application deployment.
|
||||
|
||||
## Configuring the CLI
|
||||
## Create App
|
||||
|
||||
First, install the
|
||||
[heroku-cli](https://devcenter.heroku.com/articles/heroku-cli) and login:
|
||||
Starting with an existing Backstage app or follow the [getting started guide](https://backstage.io/docs/getting-started/) to create a new one.
|
||||
|
||||
Install the
|
||||
[Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli) and create a new Heroku app:
|
||||
|
||||
```shell
|
||||
$ heroku login
|
||||
cd your-app/
|
||||
heroku apps:create <your-app>
|
||||
```
|
||||
|
||||
If you have not yet created a project through the Heroku interface, you can create it through the CLI.
|
||||
## Domain
|
||||
|
||||
Get Heroku app URL:
|
||||
|
||||
```shell
|
||||
$ heroku create <your-app>
|
||||
heroku domains -a <your-app>
|
||||
<your-app-123>.herokuapp.com
|
||||
```
|
||||
|
||||
You _might_ also need to set your Heroku app's stack to `container`:
|
||||
|
||||
```bash
|
||||
$ heroku stack:set container -a <your-app>
|
||||
```
|
||||
|
||||
Configuring your `app-config.yaml`:
|
||||
The core [app-backend plugin](https://www.npmjs.com/package/@backstage/plugin-app-backend) allows a single Heroku app to serve the frontend and backend. To make this work you need to update the `baseUrl` and `port` in `app-config.production.yaml`:
|
||||
|
||||
```yaml
|
||||
app:
|
||||
# Should be the same as backend.baseUrl when using the `app-backend` plugin
|
||||
baseUrl: https://<your-app>.herokuapp.com
|
||||
baseUrl: https://<your-app-123>.herokuapp.com
|
||||
|
||||
backend:
|
||||
baseUrl: https://<your-app>.herokuapp.com
|
||||
baseUrl: https://<your-app-123>.herokuapp.com
|
||||
listen:
|
||||
port:
|
||||
$env: PORT
|
||||
@@ -46,28 +43,98 @@ backend:
|
||||
# https://devcenter.heroku.com/articles/dynos#web-dynos
|
||||
```
|
||||
|
||||
> Make sure your file is being copied into your container in the `Dockerfile`.
|
||||
## Build Script
|
||||
|
||||
Before building the Docker image, run the [backstage host build commands](https://backstage.io/docs/deployment/docker#host-build). They must be run whenever you are going to publish a new image.
|
||||
Add a build script in `package.json` to compile frontend during deployment:
|
||||
|
||||
Heroku runs a container registry on `registry.heroku.com`. To push Backstage
|
||||
Docker images, log in to the container registry also:
|
||||
```json
|
||||
"scripts": {
|
||||
"build": "yarn build:backend --config ../../app-config.yaml --config ../../app-config.production.yaml"
|
||||
```
|
||||
|
||||
## Start Command
|
||||
|
||||
Create a [Procfile](https://devcenter.heroku.com/articles/procfile) in the app's root:
|
||||
|
||||
```shell
|
||||
$ heroku container:login
|
||||
echo "web: yarn workspace backend start --config ../../app-config.yaml --config ../../app-config.production.yaml" > Procfile
|
||||
```
|
||||
|
||||
## Push and deploy a Docker image
|
||||
## Database
|
||||
|
||||
Now we can push a Backstage [Docker image](docker.md) to Heroku's container
|
||||
registry and release it to the `web` worker:
|
||||
Provision a [Heroku Postgres](https://elements.heroku.com/addons/heroku-postgresql) database:
|
||||
|
||||
```bash
|
||||
$ docker image build . -f packages/backend/Dockerfile --tag registry.heroku.com/<your-app>/web
|
||||
|
||||
$ docker push registry.heroku.com/<your-app>/web
|
||||
|
||||
$ heroku container:release web -a <your-app>
|
||||
```shell
|
||||
heroku addons:create heroku-postgresql -a <your-app>
|
||||
```
|
||||
|
||||
Now you should have Backstage up and running! 🎉
|
||||
Update `database` in `app-config.production.yaml`:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
database:
|
||||
client: pg
|
||||
pluginDivisionMode: schema
|
||||
ensureExists: false
|
||||
ensureSchemaExists: true
|
||||
connection: ${DATABASE_URL}
|
||||
```
|
||||
|
||||
Allow postgres self-signed certificates:
|
||||
|
||||
```shell
|
||||
heroku config:set PGSSLMODE=no-verify -a <your-app>
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
Commit changes and push to Heroku to build and deploy:
|
||||
|
||||
```shell
|
||||
git add Procfile && git commit -am "configure heroku"
|
||||
git push heroku main
|
||||
```
|
||||
|
||||
View the app in the browser:
|
||||
|
||||
```shell
|
||||
heroku open -a <your-app>
|
||||
```
|
||||
|
||||
View logs:
|
||||
|
||||
```shell
|
||||
heroku heroku -a <your-app>
|
||||
```
|
||||
|
||||
## Docker
|
||||
|
||||
As an alternative to git deploys, Heroku also [supports container images](https://devcenter.heroku.com/articles/container-registry-and-runtime).
|
||||
|
||||
Login to Heroku's container registry:
|
||||
|
||||
```shell
|
||||
heroku container:login
|
||||
```
|
||||
|
||||
Configure the Heroku app to run a container image:
|
||||
|
||||
```shell
|
||||
heroku stack:set container -a <your-app>
|
||||
```
|
||||
|
||||
Locally run the [host build commands](https://backstage.io/docs/deployment/docker/#host-build), they must be run whenever you are going to publish a new image:
|
||||
|
||||
```shell
|
||||
yarn install --frozen-lockfile
|
||||
yarn tsc
|
||||
yarn build:backend --config ../../app-config.yaml --config ../../app-config.production.yaml
|
||||
```
|
||||
|
||||
Build, push, and release the container image to the `web` dyno:
|
||||
|
||||
```shell
|
||||
docker image build . -f packages/backend/Dockerfile --tag registry.heroku.com/<your-app>/web
|
||||
docker push registry.heroku.com/<your-app>/web
|
||||
heroku container:release web -a <your-app>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user