LogoLogo
v1.6.1
v1.6.1
  • 🌸What is Petal Pro?
  • πŸ’‘Changelog
  • ⏫Upgrade guide
  • Guides
    • πŸš€Creating a web app from start to finish
  • πŸ‘©β€πŸ³Recipes
    • πŸ’How to apply a recipe with git cherry pick
    • #️⃣UUIDs
    • ✍️First/Last name
    • πŸ“¦NPM packages
    • πŸ—ΊοΈGoogle Maps
  • Fundamentals
    • πŸ’ΏInstallation
    • πŸ“‚Folder structure
    • πŸ—ƒοΈIncluded Pages
    • πŸ˜€Users & Authentication
    • 🏒Organizations & Multitenancy
    • 🧊Components
    • ⬛Dark mode
    • 🎨Branding
    • 🌱Seeding
    • πŸ“„Layouts & Menus
    • πŸ–ΌοΈImage uploads
    • πŸ‘₯Impersonation
    • πŸ› οΈBackground Tasks and Jobs
    • πŸ”§Util & Helpers
    • πŸ“§Emails
    • πŸͺJavascript Hooks
    • πŸ“šExtra Hex Libraries
    • πŸ—οΈGenerators
    • πŸ—£οΈTranslations
    • πŸ–οΈContributing
    • πŸ›«Deployment
    • πŸ›‘οΈTesting
Powered by GitBook
On this page
  • Before deploy
  • Deployment with Fly.io

Was this helpful?

  1. Fundamentals

Deployment

How to get your app running in production

PreviousContributingNextTesting

Last updated 1 year ago

Was this helpful?

Before deploy

Before deployment, we've found an issue in production with the new content security policy headers. Basically, you need to add wss://...and your domain to the :content_security_policy default_src array, like below.

config.exs
config :my_app, :content_security_policy, %{
  default_src: [
    ....
    "wss://yourdomain.com",
    "wss://yourdomain.com/live/websocket"
  ]
}

Read more:

Removing CSP

If you don't care about content security policies, you can remove this config and then in router.exs change:

# Change this:
plug(:put_secure_browser_headers, %{
  "content-security-policy" =>
    ContentSecurityPolicy.serialize(
      struct(ContentSecurityPolicy.Policy, PetalPro.config(:content_security_policy))
    )
})

# To this:
plug :put_secure_browser_headers

Deployment with Fly.io

We have found Fly.io to be the best combination of cheap and easy. Petal Pro has been set up for users to quickly deploy on Fly.io's servers.

Once signed in, you can create a new project with:

fly launch

Give your app a name (this can't be changed in future). Hit Y to setting up a DB as we'll need that. Pick a server size.

When it asks "Do you want to deploy now", hit N - we need to make a couple of changes before we deploy.

Petal Framework

RUN --mount=type=secret,id=PETAL_PUBLIC_KEY \
  --mount=type=secret,id=PETAL_LICENSE_KEY \
  mix hex.repo add petal https://petal.build/repo \
    --fetch-public-key "$(cat /run/secrets/PETAL_PUBLIC_KEY)" \
    --auth-key "$(cat /run/secrets/PETAL_LICENSE_KEY)"

We still need to pass in the secrets. From your local machine you can deploy like this:

fly deploy \
  --build-secret PETAL_PUBLIC_KEY=SHA256:6Ff7LeQCh4464psGV3w4a8WxReEwRl+xWmgtuHdHsjs \
  --build-secret PETAL_LICENSE_KEY=your-unique-key
PETAL_PUBLIC_KEY: SHA256:6Ff7LeQCh4464psGV3w4a8WxReEwRl+xWmgtuHdHsjs
PETAL_LICENSE_KEY: your-unique-key

Then in your workflow:

jobs:
  deploy:
    name: Deploy app
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: superfly/flyctl-actions/setup-flyctl@master
      - run: |
        flyctl deploy --remote-only \
          --build-secret PETAL_LICENSE_KEY=${{ secrets.PETAL_LICENSE_KEY }} \
          --build-secret PETAL_PUBLIC_KEY=${{ secrets.PETAL_FINGERPRINT }}

Setting up emails

We need a service to send our emails out. We've found that the simplest and cheapest solution is Amazon SES, so Petal defaults to using this. We don't really use Amazon for much else, but its email service is affordable and the emails don't get sent to spam as easily as other services we've tried.

Setting up Amazon SES is beyond the scope of this guide - you can google how to do it. The end result should be you are able to provide the following secrets that we'll provide to our production server:

fly secrets set AWS_ACCESS_KEY="xxx" AWS_SECRET="xxx" AWS_REGION="xxx"

Finally, we can run fly deploy.

After deploying you can run fly open to see it in your browser.

If you haven't already, download the . Then you will need to .

Petal Framework is a hex package like any other. The only difference is the repo that you fetch it from. Normally your hex packages are fetched from . But Petal Framework is fetched from our private registry. We need to let Fly know about this.

Fly uses a Dockerfile to install your application. It also gives you the ability to . Firstly, open up your Dockerfile and add this before the mix deps.get step:

You could put that in a shell script and run it to deploy. A better way is to use a CI tool like GitHub Actions. First, you need to :

πŸ›«
Petal Pro Github issue
Blog post about content security policy in Phoenix apps
Fly.io CLI
register or sign in
hex.pm
set build secrets
add the secrets