Skip to content

Instantly share code, notes, and snippets.

@evandrocoan
Last active April 24, 2022 23:35
Show Gist options
  • Save evandrocoan/612477d2f22f4af39ec55307ffd22956 to your computer and use it in GitHub Desktop.
Save evandrocoan/612477d2f22f4af39ec55307ffd22956 to your computer and use it in GitHub Desktop.

Heroku Docker Tutorial (for dummies)

Using single application per git repository

  1. Create a Dockerfile on the root of your project. For example, this Dockerfile-myaplication:

    FROM evandrocoan/ubuntu18nodejspython:latest
    
    RUN npm install -g serve
    
    CMD ip address show && serve --single --no-clipboard --listen ${PORT} .
    1. This Dockerfile-myaplication file just launches a http server on the root directory of your docker machine.
    2. The image evandrocoan/ubuntu18nodejspython:latest, is a simple image with Ubuntu 18.04 and a few updates: https://hub.docker.com/repository/docker/evandrocoan/ubuntu18nodejspython
    3. Heroku will define a random environment variable PORT, which your web application should bind within 60 seconds after start: https://devcenter.heroku.com/articles/dynos#web-dynos
    4. The web service will sleep once idle for some time and it will stop consuming your monthly 550 free dyno hours: https://devcenter.heroku.com/articles/free-dyno-hours
    5. Any service other than web will not sleep and they will keep consuming your monthly free dynos 24/7. Use the command heroku ps to see your monthly free dyno hours.
  2. Create a minimal heroku.yml file on the root of your project. For example:

    build:
      docker:
        web: Dockerfile-myaplication
    1. The build.docker.web** item is a required item which must be named as **web. It points out which one is the Dockerfile for Heroku to use.
    2. The web service, is the only service which will be started automatically by Heroku. Any other service other than web needs to be started manually with:
      1. heroku ps:scale otherservicename=1
    3. Heroku will use the CMD from your Dockerfile, however, you can override the CMD command by defining the run section:
          ...
          web: Dockerfile-myaplication
      run:
        web: bash -c 'serve --single --no-clipboard --listen ${PORT}'
    4. https://medium.com/tarkalabs/docker-deployments-to-heroku-5802b14df4fa
  3. git init

  4. git add heroku.yml

  5. git add Dockerfile-myaplication

  6. git commit -m "My cool application"

  7. You are done. This is all you need to run a docker container with Heroku. Now to publish it:

    1. heroku login
    2. heroku apps:create mycustomanduniquename --remote heroku-git-remote
      1. Note: Your app will be available on the URL: https://mycustomanduniquename.herokuapp.com
      2. This will add a new git remote to your repository called heroku-git-remote. You can use this remote directly from git to deploy a new version of your application.
    3. git push heroku-git-remote custombranch:master
      1. This will push updates from the local branch custombranch to the Heroku remote branch master. On each push to the Heroku remote master branch, the docker container image will be rebuilt with the changes on the git branch.
      2. Add --force-with-lease to forced push the branch to the remote, causing the docker container to be rebuild.
    4. heroku stack:set container
      1. Set this app as docker container
      2. All environment variables are passed automatically by Heroku to your docker build commands.
    5. To set environment variables on your Heroku remote instance:
      1. heroku config (to list variables)
      2. heroku config:set REACT_APP_GITHUB_TOKEN=your_token_af2dcas343...
      3. https://devcenter.heroku.com/articles/config-vars
  8. Managing you application after creation:

    1. heroku ps
      1. To list your running Heroku processes
    2. heroku logs --ps web
      1. To see the logs of you web Heroku running dyno (container)
    3. To rename you application after creating it:
      1. heroku apps:rename mynewuniquename
      2. It will automatically update you URL on: https://mynewuniquename.herokuapp.com
    4. To rename your Heroku git remote:
      1. heroku git:remote -a [app-name] -r [new-remote-name]
      2. git remote rm heroku-old-remote
      3. https://stackoverflow.com/questions/6226846/how-to-change-a-git-remote-on-heroku?answertab=votes#tab-top

Using multiple applications per git repository

The example commands are for the repository . To put this project online on Heroku, you are going to need:

  1. heroku login
  2. heroku apps:create evandrocoanreactbackend --remote heroku-backend
  3. heroku apps:create evandrocoanreactfrontend --remote heroku-frontend
    1. Note: Your app will be available on the URL: https://evandrocoanreactbackend.herokuapp.com https://evandrocoanreactfrontend.herokuapp.com
  4. heroku stack:set -a evandrocoanreactbackend container
  5. heroku stack:set -a evandrocoanreactfrontend container
    1. Set this app as docker container
  6. git push heroku-backend custombranch:master
  7. git push heroku-frontend custombranch:master
    1. To push updates from the local branch custombranch to the Heroku remote branch master. On each push to the Heroku remote master branch, the docker container image will be rebuilt with the changes on the git branch.
    2. Add --force-with-lease to forced push the branch to the remote, causing the docker container to be rebuild.
  8. heroku ps
    1. To list your running Heroku processes
  9. To see the logs of you web Heroku running dyno (container)
    1. heroku logs -a evandrocoanreactbackend --ps web
    2. heroku logs -a evandrocoanreactfrontend --ps web
  10. To set environment variables on your Heroku remote instance: https://devcenter.heroku.com/articles/config-vars
    1. frontend:
      1. heroku config -a evandrocoanreactfrontend (to list variables)
      2. heroku config:set -a evandrocoanreactfrontend REACT_APP_GITHUB_RESEARCHER_BACKEND_IP=127.0.0.1
      3. heroku config:set -a evandrocoanreactfrontend REACT_APP_GITHUB_RESEARCHER_BACKEND_PORT=0
    2. backend:
      1. heroku config -a evandrocoanreactfrontend (to list variables)
      2. heroku config:set -a evandrocoanreactfrontend REACT_APP_GITHUB_RESEARCHER_TOKEN=as546a654...

References

  1. https://levelup.gitconnected.com/deploying-go-react-to-heroku-using-docker-9844bf075228
  2. moby/moby#2838 - Cannot kill or detach a docker container using Ctrl-C or Ctrl-\
  3. https://create-react-app.dev/docs/adding-custom-environment-variables
  4. https://devcenter.heroku.com/articles/procfile
  5. https://devcenter.heroku.com/articles/dynos
  6. https://medium.com/inato/how-to-setup-heroku-with-yarn-workspaces-d8eac0db0256
  7. https://stackoverflow.com/questions/38440876/stand-up-select-services-with-docker-compose
  8. https://www.ostechnix.com/explaining-docker-volumes-with-examples/
  9. https://stackoverflow.com/questions/44848721/docker-compose-inside-docker-in-a-docker
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment