خطای javascript در حالت prod برای فونیکس (حل شد)

phoenix
production

#1

سلام

من پروژه فونیکس رو با دستورات زیر برای حالت prod کامپایل کردم (در حالت dev من مشکلی ندارم )


نسخه فونیکس 1.3.3
نسخه الکسیر  1.6.4

کانتینر رو ساختم

-> sudo docker run -d  --rm --name elixir  \
-v "/html_app/:/html_app" \
mojtabanaserei/elixir:1.6.4  \
sh -c " \
apk add python make g++  && \
npm install -g brunch yarn && \
sleep 50000
"

وارد کانتینر شدم

-> sudo docker exec -it elixir ash

وارد مسیر پروژه شدم

-> cd html_app/html_site_umbrella

دایرکتوری ها و فایلهایی که در حالت dev ساخته شده بودن رو پاک کردم

-> rm -r _build  deps  apps/html_site_web/assets/node_modules 

وابستگی های مورد نیاز برای حالت prod رو گرفتم

-> mix deps.get --only prod

کلید خصوصی برای حالت prod رو درست کردم

-> MIX_ENV=prod mix phx.gen.secret

کلید تولید شده رو در فایل زیر قرار دادم به جای کد قبلی

-> vi apps/html_site_web/config/prod.secret.exs

کامپایل کردم

-> MIX_ENV=prod mix compile

وارد مسیر asset شدم

-> cd apps/html_site_web/assets

ساختن فایل های asset برای حالت prod

-> brunch build --production && cd ..
-> MIX_ENV=prod mix phx.digest 

مجددا به مسیر پروژه برگشتم

-> cd /html_app/html_site_umbrella

سرور رو تست کردم و اجرا شد

-> PORT=4000 MIX_ENV=prod mix phx.server

بعد از کانتینر خارج شدم و کانتینر رو حذف کردم

چون از nginx بعنوان پروکسی استفاده میکنم فایلهای موجود در مسیر زیر رو داخل کانتینر nginx والیوم کردم

apps/html_site_web/priv/static

بعد از ران کردن سرویس ها . سایت بالا میاد ولی یه مشکلی وجود داره .

خطای زیر رو در مرورگر موزیلا دارم

SyntaxError: import declarations may only appear at top level of a module

خطای زیر رو هم در مرورگر کروم دارم

Uncaught SyntaxError: Unexpected string

با سرچی که زدم اینو پیدا کردم

و طبق راه حل توی کد تغییر ایجاد کردم به این صورت
تغییر خط زیر از


<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

به

<script src="<%= static_path(@conn, "/js/app.js") %>" type="module"></script>

خروجی در مرورگر که inspect کردم هم به این صورت هست

<script src="/js/app-c0a3ede01d7f0bd9471ced4a79e56ecd.js?vsn=d" type="module"></script>

ولی مشکل همچنان رفع نشده

البته در بعضی صفحات من کدهای js دیگه ای هم دارم که مربوط به کچپا گوگل هست تا در زمان تایید کاربر یا timeout یه کاری رو انجام بدن . کدهاش به این صورت هست

<script>
function recaptcha_callback_login_html() {$("#button_login_html").removeAttr("disabled","disabled");}
function recaptcha_expired_login_html() {$("#button_login_html").attr("disabled","disabled");}
</script>

اینم زمانی که میخواد اجرا بشه در مرورگر کروم یه خطای تولید میکنه

Uncaught (in promise) null

یا در مرورگر موزیلا

uncaught exception: null

#2

چقدر عالی توضیح دادی :ok_hand:
من اول دنبال syntax error میگردم


#3

syntax error. توی مرورگر اینو نشون میده

Screenshot_2018-12-05_14-27-39


#4

اطلاعات خوبی اینجا هست


#5

من این خطاها رو هم توی کنسول مرورگر دارم

Screenshot_2018-12-05_16-39-06


#6

این خطا ها از کد که قوانین content security policy رعایت نمیکنن میاد میتونی این خطا هارو درست کنی یا قوانین csp برای http سرور را کم تر کنی


#7

آیا احتمالش هست که این خطاها

برای اضافه کردن این کدها زیر در فایل template باشه ؟

تنظیماتی که در nginx برای CSP انجام شده به این صورت هست

add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://assets.zendesk.com; font-src 'self' https://themes.googleusercontent.com; frame-src https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";

#8

توی این لینک یک پلاگ تعریف کرده که میاد یه سری csp که شامل خطوط زیر هست رو به هدر اضافه میکنه

"default-src 'self'; \
    connect-src 'self' #{ws_url conn} #{ws_url conn, "wss"}; \
    script-src 'self' 'unsafe-inline' 'unsafe-eval'; \
    style-src 'self' 'unsafe-inline' 'unsafe-eval'"

ولی تو این لینک من نگاه کردم
https://lollyrock.com/posts/content-security-policy/

اینو گفته


#9

احتمال داره . کار با CSP همیشه خیلی آزمون خطا داره ببین میتونی تنظیمات csp و تغییر بدی که کمتر سخت بگیره ؟
https://content-security-policy.com/


#10

کار صحیح اینکه ببینی کجای کد تخلف داره و درستش کنی اما بعضی وقت ها کتاب خانه ها این کارا رو میکنند و نمیشه به راحتی درستش کرد


#11

اول پس کد رو اصلاح میکنم js که خودم اضافه کردم رو حذف میکنم ببینم باز مشکل داره یا نه . اگر حل نشد تنظیمات csp رو تغییر میدم .


#12

کارهای های زیر رو انجام دادم ولی موفق نشدم:

  • حدف کدهایی که خودم نوشته بودم

  • حذف کدهای دیگه که آماده بود برای ادیتور js

  • حذف کدهای کپچا

  • حذف تگ های script

  • اصلاح csp و تست در سایت گوگل

  • غیر فعال سازی csp داخل nginx و تنظیماتی که روشون شک داشتم

  • فهرست موارد

  • حذف کپچا فقط باعث شد که اون وارننینگهای csp برن که اینطوری فایده نداره حالا اون رو بعدا درست میکنم
    با این حال وقتی اون وارنینگ ها هم رفته بودن اون خطای مورد نظر همچنان پابرجا بود :expressionless:

  • پاکسازی js فایل app.js خوده فونیکس رو هم حذف کردم . . این باعث شد خطا بره :grinning: ولی دیگه js ای توی صفحه نیست که بخواد مشکل ایجاد بکنه :laughing:

حتی برای مورد زیر به صورت دستی رفتم محتوی فایل نهایی js رو تغییر دادم یعنی اون قسمت از کد که مربوط به import بود و توی فایل app.js هست رو بردم بالای فایل قرار دادم چون فایل app.js با فایلهای دیگه توسط brunch ترکیب میشن . گفتم شاید مشکل از این باشه. ولی باز درست نشد

برای هر کدوم از کارهایی که انجام دادم این مراحل انجام شد:
وارد شد* ن به کانتینر prod که مخصوص این کار ران کرده بودم با دستوری که در بالا گفتم

  • حذف فایل و دایرکتوری های قدیمی و کامپایل مجدد
  • حذف فایل های استاتیک قدیمی و جایگزین کردن با جدید
  • ساختن image برای حالت prod
  • متوقف کردن کانتینر nginx و html و حذف کش و دوباره ران کردن هر دو با دکر کمپوز
  • حذف کش مرورگر . تست با کروم و موزیلا

#13

تونستی پیدا کنی که دقیقا کدوم import این مشکلو داره؟ یعنی وقتی import نمیکنی مشکل حل میشه؟


#14

این مشکل داره

import "phoenix_html"

ولی اگر غیر فعال بشه از امکاناتی که فراهم کرده نمیشه استفاده کرد . الان میخوام نسخه 1.4 فونیکس رو توی حالت prod تست بکنم . ببینم با اون همین مشکل رو دارم یا نه . بعد بجای brunch از webpack استفاده بکنم.


#15

من نسخه 1.4 رو تست کردم مشکلی نداشتم البته اون با webpack بود . دوباره رفتم نسخه 1.3 که با brunch بود رو کامپایل کنم دیدم warning دارم به این صورت

18:12:28 - info: Using outdated versions of bootstrap, copycat-brunch, font-awesome, jquery, phoenix, phoenix_html, popper.js, tether, trying to update to match package.json versions
18:12:29 - info: Installing packages with yarn...
18:12:32 - warn: Loading of babel-brunch failed due to Cannot find module '/html_app/example_html_site_umbrella/apps/example_html_site_web/assets/node_modules/babel-brunch'
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace.
18:12:32 - warn: Loading of brunch failed due to Cannot find module '/html_app/example_html_site_umbrella/apps/example_html_site_web/assets/node_modules/brunch'
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace.
18:12:32 - warn: Loading of clean-css-brunch failed due to Cannot find module '/html_app/example_html_site_umbrella/apps/example_html_site_web/assets/node_modules/clean-css-brunch'
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace.
18:12:32 - warn: Loading of sass-brunch failed due to Cannot find module '/html_app/example_html_site_umbrella/apps/example_html_site_web/assets/node_modules/sass-brunch'
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace.
18:12:32 - warn: Loading of uglify-js-brunch failed due to Cannot find module '/html_app/example_html_site_umbrella/apps/example_html_site_web/assets/node_modules/uglify-js-brunch'
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace.
18:12:32 - info: compiling
18:12:33 - info: compiled 7 files into app.js, copied 251 in 5.5 sec
05 Dec 18:12:33 - info: [copycat] copied 21 files (0 files were not modified)
05 Dec 18:12:33 - info: [copycat] copied 36 files (0 files were not modified)
05 Dec 18:12:33 - info: [copycat] copied 36 files (0 files were not modified)
05 Dec 18:12:33 - info: [copycat] copied 42 files (0 files were not modified)

ظاهرا brunch نمیتونست پکیج های مورد نیاز رو نصب بکنه برای همین دستور زیر رو زدم

npm install

بعد دوباره دستور زیر رو زدم و بدون warning کامپایل شد. تست کردم مشکل رفع شد و دیگه خطا نداشتم . البته اون warningهای CSP همچنان هستن که باید درست بکنم.

brunch build --production && cd ..

06:17:21 - info: compiling
06:17:27 - info: compiling.
06:17:27 - info: compiled 10 files into 2 files, copied 252 in 9.9 sec
06 Dec 06:17:27 - info: [copycat] copied 21 files (0 files were not modified)
06 Dec 06:17:27 - info: [copycat] copied 36 files (0 files were not modified)
06 Dec 06:17:27 - info: [copycat] copied 36 files (0 files were not modified)
06 Dec 06:17:27 - info: [copycat] copied 42 files (0 files were not modified)

با تشکر از همه دوستان و شهریار عزیز هم زحمت کشیدن و این پست رو همزمان با پست بنده در سایت الکسیر زده بودن که کمک خوبی بود.


#16

در مورد این warningها

سرچ کردم و اینو پیدا کردم
https://productforums.google.com/forum/#!topic/inbox/ymJOodokX6A;context-place=forum/inbox

خودمم تست کردم مورد بالا رو و منم همونا رو داشتم . به نظر مشکل از مرورگر باشه . ولی نسخه ای که اون شخص استفاده کرده ۵۴ بوده برای من ۶۳ . جالبه اگر مشکل از مرورگر باشه ولی هنوز حل نکرده باشن . یا شایدم نباشه . بهرحال اگر خواستم درست بکنم یه پست جدا براش میزنم .


#17

من فکر کردم کلا از webpack استفاده میکنی، سعی کن برای js خودت تصمیم بگیری که از چی استفاده میکنی و همیشه دنبال پیشفرض فریمورک ها نباشی


#18

تو نسخه جدید فونیکس از وب پک استفاده می کنیم که خیلی خیلی بهتره !! خیلی از مشکلات کانفیگ کردن و … حتی برای من که اصلا بلد نیستم با یک جستجو پیدا می شه برانچ تقریبا مثل سرطان است


#19

متوجه شدم، من میگم که همیشه خودتون شیوه کار با js رو مشخص کنید