アプリの開発を行い、ローカルでは正常なテストアプリですが、
デプロイ完了しインストールを試みましたがエラー(404)となり、どうしても解決する情報がヒットしませんため、質問させていただきました。
【 症状・解決 】
サーバーへデプロイし、開発ストアへインストールしようとすると、
「404 このアドレスにはページがありません」となり、インストール画面が表示されない。
開発ストアへインストールし、動作の確認がしたく思っております。
【 現在の状況 】
下記のNginxのアクセスログではでは正常にアクセス出来ている様子で、
リダイレクトの問題かと思いますが、はっきりとした原因がわからず、困り果てております。
ローカル起動(npm run dev)のアプリはアインストール・再インストールが可能です
(パートナーアカウント > アプリ管理 > 該当アプリ > ストアを選択するからも可能)
【 開発環境 】
Node.js, Rimix, React
基本的に npm init @Shopify_77 [email removed] をベースに開発
npm init @Shopify_77 [email removed]
- Start with Remix (recommended)
- JavaScript
(未実行) npm run generate extension
{ APP_NAME } = 管理画面 > アプリ管理 > 該当アプリ > アプリ名
{ APP_HANDLE } = 管理画面 > アプリ管理 > 該当アプリ > アプリハンドル
{ MY_DOMAIN } = 独自ドメイン
{ SHOPIFY_APP_URL } = https://{ MY_DOMAIN }
{ SHOPIFY_API_KEY } = 管理画面 > アプリ管理 > 該当アプリ > クライアントID
{ SHOPIFY_API_SECRET } = 管理画面 > アプリ管理 > 該当アプリ > クライアントシークレット
として以降記述させていただきます。
【 Shopify パートナーアカウント アプリ管理情報 】
アプリURL
https://{ MY_DOMAIN }/ (ここでは末の「/」入力
設定URL
未記入
許可されたリダイレクトURL
https://{ MY_DOMAIN }/auth/callback
https://{ MY_DOMAIN }/auth/shopify/callback
イベントのバージョン
2024-01 (最新)
コンプライアンスのWebhook
顧客データリクエストエンドポイント
https://{ MY_DOMAIN }/webhooks/customer_request
顧客データ消去エンドポイント
https://{ MY_DOMAIN }/webhooks/customer_deletion
ショップデータ消去エンドポイント
https://{ MY_DOMAIN }/webhooks/deletion
【 パートナーアカウントからアクセスした際のサーバーログ 】
[ Server Log - Nginx ]
IP_ADDRESS - - [16/Feb/2024:07:14:04 +0000] "GET /?hmac=b0a4f9*****&host=YWRta*****&shop=test55devshop.myshopify.com×tamp=1708067644 HTTP/1.1" 302 5 "https://partners.shopify.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Safari/605.1.15" "IP_ADDRESS"
[ Server Log - App ]
GET / 200 - - 2.392 ms
GET / 200 - - 2.029 ms
GET /?hmac=b0a4f9*****&host=YWRta*****&shop=test55devshop.myshopify.com×tamp=1708067644 302 - - 2.251 ms
GET /app?hmac=b0a4f9*****&host=YWRta*****&shop=test55devshop.myshopify.com×tamp=1708067644 302 - - 13.080 ms
GET / 200 - - 2.098 ms
GET / 200 - - 4.542 ms
【 Server 設定ファイル 】
[ .env ]
DATABASE_URL = ""
SHOPIFY_APP_URL = "{ SHOPIFY_APP_URL }"
SCOPES = "read_products,write_products" // 商品読み書きのみのスコープ
SHOPIFY_API_KEY = "{ SHOPIFY_API_KEY }"
SHOPIFY_API_SECRET = "{ SHOPIFY_API_SECRET }"
[ shopify.app.toml ]
client_id = "{ SHOPIFY_API_KEY }"
name = "{ APP_NAME }"
handle = "{ APP_HANDLE }"
application_url = "{ SHOPIFY_APP_URL }"
embedded = true
[build]
automatically_update_urls_on_dev = true
dev_store_url = "test55devshop.myshopify.com"
include_config_on_deploy = true
[access_scopes]
# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
scopes = "read_products,write_products"
[auth]
redirect_urls = [
"https://{ MY_DOMAIN }/auth/callback",
"https://{ MY_DOMAIN }/auth/shopify/callback"
]
[webhooks]
api_version = "2024-01"
[pos]
embedded = false
※ application_url はここでは末の「/」なし
【 Nginx 設定ファイル 】
[ nginx.conf ]
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
[ { MY_DOMAIN }.conf ]
upstream { NODE_APP_CONTAINER } {
server { NODE_APP_CONTAINER }:3000;
}
server {
listen 80;
location / {
proxy_pass { NODE_APP_CONTAINER };
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
redirect_urls と 許可されたリダイレクトURL を
https://{ MY_DOMAIN }/auth/callback
https://{ MY_DOMAIN }/auth/shopify/callback
https://{ MY_DOMAIN }/api/auth/callback
にしたり、.env の SHOPIFY_APP_URL や アプリURL、
ポートの設定やwebhooksを確認しつつここまできましたが、インストールだけがどうしても解決出来ません。。
上記の情報以外で必要な情報が御座いましたら記述させていただきます。
初歩的な質問かもしれませんが、何卒、よろしくお願いいたします。
