Issue to access the files of Deployed Shopify APP in Heroku

[helidonashabani]

Issue summary

I'm facing an issue using the Heroku environment. I have created the app in Heroku and deployed Shopify APP using Docker Container, which everything it went successfully. But when the APP is installed in the Testing Shopify Store, I have the issue of not being able to find dev_embed.js. and could not have access to index.jsx.

Here are the issues that are appearing at the browser, and also heroku log file:

1. GET https://my-app.herokuapp.com/dev_embed.js net::ERR_ABORTED 404 (Not Found)
2. Access to script at 'https://my-shopify-store.myshopify.com/admin/oauth/..../index.jsx') from origin 'https://my-app.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Steps that I followed to fix the issue:

1. At web/nginx.conf, I have added:

   http {
      ...
          server {
          .... 
               # this part is added 
               location /dev_embed.js {
                     alias /app/web/frontend/dev_embed.js;
                 }
          }
      }

2. At Procfile I have this code:

   web: vendor/bin/heroku-php-apache2 public/
   worker: php artisan migrate

   Do I need to add additional configuration of the files that need to be load from any Shopify Admin Panel to Heroku Server? Because right now I'm still having the issue even though I did the above changes.

Looking forward to any feedback/help.

[rafaelstz]

The native nginx.config works file, check these points:

• If it's Docker you don't need Procfile
• If it's Apache your Nginx config won't work
• Check your base URL in your .env file or environment variables
• Check your assets URL to avoid CORS

[helidonashabani]

Hi @rafaelstz, thank you so much for your feedback. But I'm still having same issue even though I put the BASE URL in .env file and also in Env variables in Heroku.

In fact if I use Docker then I'm using the nginx server:

FROM php:8.1-fpm-alpine

ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY

RUN apk update && apk add --update nodejs npm \
    composer php-pdo_sqlite php-pdo_mysql php-pdo_pgsql php-simplexml php-fileinfo php-dom php-tokenizer php-xml php-xmlwriter php-session \
    openrc bash nginx

RUN docker-php-ext-install pdo mysqli pdo_mysql && docker-php-ext-enable pdo_mysql

COPY --chown=www-data:www-data web /app
WORKDIR /app

# Overwrite default nginx config
COPY web/nginx.conf /etc/nginx/nginx.conf

# Use the default production configuration
RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"

RUN composer install
RUN touch /app/storage/db.sqlite
RUN chown www-data:www-data /app/storage/db.sqlite

RUN cd frontend && npm install && npm run build
RUN composer build

ENTRYPOINT [ "/app/entrypoint.sh" ]

Where at /app/entrypoint.sh we can find the code below:

#! /usr/bin/env bash

# Clean up openrc and nginx configurations
sed -i 's/hostname $opts/# hostname $opts/g' /etc/init.d/hostname
sed -i 's/#rc_sys=""/rc_sys="docker"/g' /etc/rc.conf
sed -i "s/listen PORT/listen $PORT/g" /etc/nginx/nginx.conf

cd /app

echo "Running database migrations..."
php artisan migrate --force

echo "Starting nginx server..."
openrc
touch /run/openrc/softlevel
rc-service nginx start

echo "Starting PHP server..."
php-fpm

Therefore, based on the building Shopify APP using Docker in Heroku environment should it take in consideration nginx config. And BASE URL is also set.

But same issue again!

[rafaelstz]

Try to add these variables in your Dockerfile:

ARG APP_NAME
ENV APP_NAME=$APP_NAME
ARG APP_KEY
ENV APP_KEY=$APP_KEY
ARG APP_DEBUG
ENV APP_DEBUG=$APP_DEBUG
ARG APP_ENV
ENV APP_ENV=$APP_ENV
ARG APP_URL
ENV APP_URL=$APP_URL
ARG LOG_CHANNEL
ENV LOG_CHANNEL=$LOG_CHANNEL
ARG HOST
ENV HOST=$HOST
ARG SCOPES
ENV SCOPES=$SCOPES
ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
ARG SHOPIFY_API_SECRET
ENV SHOPIFY_API_SECRET=$SHOPIFY_API_SECRET
ARG API_VERSION
ENV API_VERSION=$API_VERSION
ARG CACHE_DRIVER
ENV CACHE_DRIVER=$CACHE_DRIVER
ARG REDIS_CLIENT
ENV REDIS_CLIENT=$REDIS_CLIENT
ARG REDIS_URL
ENV REDIS_URL=$REDIS_URL
ARG REDIS_PORT
ENV REDIS_PORT=$REDIS_PORT
ARG DB_CONNECTION
ENV DB_CONNECTION=$DB_CONNECTION
ARG DB_HOST
ENV DB_HOST=$DB_HOST
ARG DB_PORT
ENV DB_PORT=$DB_PORT
ARG DB_DATABASE
ENV DB_DATABASE=$DB_DATABASE
ARG DB_USERNAME
ENV DB_USERNAME=$DB_USERNAME
ARG DB_PASSWORD
ENV DB_PASSWORD=$DB_PASSWORD

Then add then in your heroky.yml:

build:
  docker:
    web: Dockerfile
  config:
    APP_NAME: "My App"
    APP_KEY: "base64:ijOdTMpZfq5hKelNMd5+UKbJpZtgRSnKknahrpCzI="
    APP_ENV: "production"
    APP_URL: "https://myapp.heroku.com"
    HOST: "https://myapp.heroku.com"
    SCOPES: "write_products,read_customers"
    LOG_CHANNEL: "stack"
    APP_DEBUG: false
    API_VERSION: "2023-04"
    SHOPIFY_API_KEY: "*********"
    SHOPIFY_API_SECRET: "**********"
    CACHE_DRIVER: "redis"
    REDIS_CLIENT: "phpredis"
    DB_CONNECTION: "pgsql"