前提・実現したいこと
AWSのEC2の無料枠を使いデプロイをしています。
デプロイ自体は出来て、サイトは表示されたのですが、
fullcalenderが表示されません。
ローカルでは問題なく表示されており、本番環境でのみ表示されておりません。
ローカル
https://gyazo.com/f549cab914ec766b3fc8220a962ed4c0
本番環境
https://gyazo.com/bd8d6fd1aed62743b90caef4f8de3855
21:30更新
https://gyazo.com/62e91fa97740878b6c2af1f761041879
文字とボタンまでは表示出来るようになりました。
カレンダー部分はまだ表示されません。
環境
ruby '2.6.5'
rails '6.0.0'
AWS EC2 AmazonLinuxAMI t2micro
fullcalender v5
エラーメッセージ
本番環境の検証ツール
consoleエラー文言
※検証ツールの中のエラー文言はなくなりました。
calender.js:1 Uncaught Error: Cannot find module '@fullcalendar/interaction' at webpackMissingModule (calender.js:1) at Module../app/javascript/calender.js (calender.js:1) at __webpack_require__ (bootstrap:19) at Object../app/javascript/packs/application.js (application.js:10) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83
cat production.log
[a1b5ac2e-c33d-4b3e-ba54-5bebca83962d] ActionView::Template::Error (Webpacker can't find application in /var/www/CustomerCalender/public/packs/manifest.json. Possible causes: 1. You want to set webpacker.yml value of compile to true for your environment unless you are using the `webpack -w` or the webpack-dev-server. 2. webpack has not yet re-run to reflect updates. 3. You have misconfigured Webpacker's config/webpacker.yml file. 4. Your webpack configuration is not creating a manifest. Your manifest contains:
該当のソースコード
webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect default: &default source_path: app/javascript source_entry_path: packs public_root_path: public public_output_path: packs cache_path: tmp/cache/webpacker check_yarn_integrity: false webpack_compile_output: true # Additional paths webpack should lookup modules # ['app/assets', 'engine/foo/app/assets'] resolved_paths: [] # Reload manifest.json on all requests so we reload latest compiled packs cache_manifest: false # Extract and emit a css file extract_css: false static_assets_extensions: - .jpg - .jpeg - .png - .gif - .tiff - .ico - .svg - .eot - .otf - .ttf - .woff - .woff2 extensions: - .mjs - .js - .sass - .scss - .css - .module.sass - .module.scss - .module.css - .png - .svg - .gif - .jpeg - .jpg development: <<: *default compile: true # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules check_yarn_integrity: true # Reference: https://webpack.js.org/configuration/dev-server/ dev_server: http: true host: localhost port: 3035 public: localhost:3035 hmr: false # Inline should be set to true if using HMR inline: true overlay: true compress: true disable_host_check: true use_local_ip: false quiet: false pretty: false headers: 'Access-Control-Allow-Origin': '*' watch_options: ignored: '**/node_modules/**' test: <<: *default compile: true # Compile test packs to a separate directory public_output_path: packs-test production: <<: *default # Production depends on precompilation of packs prior to booting for performance. compile: true # Extract and emit a css file extract_css: true # Cache manifest.json for performance cache_manifest: true
application.js
js
1// This file is automatically compiled by Webpack, along with any other files 2// present in this directory. You're encouraged to place your actual application logic in 3// a relevant structure within app/javascript and only use these pack files to reference 4// that code so it'll be compiled. 5 6require("@rails/ujs").start() 7require("turbolinks").start() 8require("@rails/activestorage").start() 9require("channels") 10require("../calender.js") 11require('jquery') 12 13// document.getElementById("confirm").addEventListener('click', function() { 14// calendar.refetchEvents(); 15// calendar.render(); 16// }); 17// Uncomment to copy all static images under ../images to the output folder and reference 18// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 19// or the `imagePath` JavaScript helper below. 20// 21// const images = require.context('../images', true) 22// const imagePath = (name) => images(name, true) 23 24
calender.js
js
1import { Calendar } from '@fullcalendar/core'; 2import dayGridPlugin from '@fullcalendar/daygrid'; 3import interactionPlugin from '@fullcalendar/interaction'; 4import listPlugin from '@fullcalendar/list'; 5import timeGridPlugin from '@fullcalendar/timegrid'; 6 7document.addEventListener('turbolinks:load', function() { 8 9 let calendarEl = document.getElementById('calendar'); 10 let calendar = new Calendar(calendarEl, { 11 navLinks: true, 12 editable: true, 13 nowIndicator: true, 14 initialView: 'dayGridMonth', 15 locale: 'ja', 16 timeZone: 'Asia/Tokyo', 17 height: 630, 18 headerToolbar: { 19 left: "dayGridMonth,timeGridWeek,timeGridDay,listMonth", 20 center: "title", 21 right: "today prev,next" 22 }, 23 buttonText: { 24 today: '今日', 25 month: '月', 26 list: 'リスト', 27 week: '週', 28 day: '日', 29 }, 30 views: { 31 timeGridWeek: { 32 slotMinTime: '07:00:00', 33 slotMaxTime: '22:00:00' 34 }, 35 timeGridDay: { 36 slotMinTime: '07:00:00', 37 slotMaxTime: '22:00:00' 38 } 39 }, 40 eventClick: function(event) { 41 }, 42 dayCellContent: function(e) { 43 e.dayNumberText = e.dayNumberText.replace('日', ''); 44 }, 45 46 47 eventSources: [{url:'/events.json', 48 color: '#2ECCFA'} 49 ], 50 plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, ] 51 }); 52 53 calendar.render(); 54}); 55 56 57 58
index.json.jbuilder
json
1json.array!(@events) do |event| 2 if current_user.id == event.user_id 3 json.extract! event, :id, :title, :body 4 json.start event.start_time 5 json.end event.end_time 6 json.url event_url(event, format: :html) 7 end 8end
index.html.haml
haml
1省略 2.Main__body 3 %p#calendar 4省略
試したこと
・EC2インスタンス再起動
・bin/webpack
・rails webpacker:install
・yarn install
・データベース再起動
・webpacker.ymlのproduction:のcompileをtrueに変更
・yarn add fullcalendar
・npm install --save@fullcalendar/interaction
・package.jsonの"webpack-dev-server": "^3.11.1",を"devDependencies"の外に出して、yarn install
・package.jsonに"@fullcalendar/interaction": "^5.5.0",追加
bin/webpackをする事で、デプロイ自体は出来たのですが、
fullcalenderの表示がされないままです。
もし足りない記述がありましたら、教えて頂けたらと思います。
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。