Deploying base/default Remix App to Fly.io throws 502 error

1

followed the documentation that SHOPIFY has put for Fly.io.
Before this step, I verified that I successfully installed my Shopify Remix App to my dev store, and I’m able to preview it. After running fly deploy, the url provided to view my “newly deployed app” takes me to a HTTP 502 Error page stating "xxx.fly.dev is currently unable to handle this request. "

The logs in my Fly.io dashboard has stated “ewr [error] [PC01] instance refused connection. is your app listening on 0.0.0.0:3000? make sure it is not only listening on 127.0.0.1 (hint: look at your startup logs, servers often print the address they are listening on)” but I already added a host property to my remix.config.js thinking that would solve the problem:

remix.config.js:

// Corrected: Replace HOST with SHOPIFY_APP_URL to prevent conflicts
if (
  process.env.HOST &&
  (!process.env.SHOPIFY_APP_URL ||
    process.env.SHOPIFY_APP_URL === process.env.HOST)
) {
  process.env.SHOPIFY_APP_URL = process.env.HOST;
  delete process.env.HOST;
}

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  appDirectory: "app",
  serverModuleFormat: "cjs",
  dev: { 
    port: process.env.PORT || 3000,   // Ensure the dev server uses the correct port
    host: "0.0.0.0"                   // Add this line to specify the host
  },
  future: {},
};

fly.toml:

# fly.toml app configuration file generated for remix-app-dev on 2024-10-07T14:32:39-04:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#

app = 'leviancom-uat'
primary_region = 'ewr'

[build]

[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = 'stop'
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']

[[vm]]
  memory = '1gb'
  cpu_kind = 'shared'
  cpus = 1

and my shopify.web.toml:

# Learn more about configuring your app at https://shopify.dev/docs/apps/tools/cli/configuration

client_id = "63e27d01005d7569f25d5c9de54b4795"
name = "remix-app-dev"
handle = "remix-app-dev-2"
application_url = "https://my-app-name.fly.dev"
embedded = true

[build]
automatically_update_urls_on_dev = true
dev_store_url = "storename.myshopify.com"
include_config_on_deploy = true

[access_scopes]
# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
scopes = "write_products"

[auth]
redirect_urls = [
  "https://my-app-name.fly.dev/auth/callback",
  "https://my-app-name.fly.dev/auth/shopify/callback",
  "https://my-app-name.fly.dev/api/auth/callback"
]

[webhooks]
api_version = "2024-10"

  [[webhooks.subscriptions]]
  uri = "//webhooks/customers/data_request"
  compliance_topics = [ "customers/data_request" ]

  [[webhooks.subscriptions]]
  uri = "//webhooks/customers/redact"
  compliance_topics = [ "customers/redact" ]

  [[webhooks.subscriptions]]
  uri = "//webhooks/shop/redact"
  compliance_topics = [ "shop/redact" ]

  [[webhooks.subscriptions]]
  topics = [ "app/uninstalled" ]
  uri = "//webhooks/app/uninstalled"

[pos]
embedded = false

If anything understands how to resolve this port issue, it would be greatly appreciated

2

Your production remix app probably isn’t running on the correct HOST/PORT. Your remix config only applies to dev.

3

this is a valid point, but I just came to a realization about fly’s “launch” command that creates the fly.toml file:

As a first-time user of Fly.io, I did not know that a [dev] section was required as the default fly.toml file does not produce this. To be clear:
If one uses flyctl launch , you will see the following:

# fly.toml app configuration file generated for remix-app-deploytest2 on 2024-10-07T16:26:07-04:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#

app = 'app-name-you-chose'
primary_region = 'ewr'

[build]

[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']

[[vm]]
  memory = '1gb'
  cpu_kind = 'shared'
  cpus = 1

However, adding the following made this deployment finally work:

# fly.toml app configuration file generated for remix-app-deploytest2 on 2024-10-07T16:26:07-04:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#

app = 'app-name-you-chose'
primary_region = 'ewr'

[build]

[env] 

 PORT = "3000"

 SHOPIFY_APP_URL = "https://app-name-you-chose.fly.dev"

 SHOPIFY_API_KEY = "your-key-made-by-shopify"

 SCOPES = "scopes-defined-in-shopify.app.toml"

[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']

[[vm]]
  memory = '1gb'
  cpu_kind = 'shared'
  cpus = 1

For anyone who is struggling to deploy a Shopify Remix application, I highly recommend this guide

4

The SHOPIFY_API_KEY is sensitive? If so, you should remove it from config and use fly secrets set SHOPIFY_API_KEY=...

5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.