質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

1回答

2146閲覧

AWSデプロイをすると、fullcalenderが表示されないのを解消したい

a-ichi

総合スコア16

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2021/01/03 08:22

編集2021/01/03 12:49

前提・実現したいこと

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の表示がされないままです。

もし足りない記述がありましたら、教えて頂けたらと思います。

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。

webpacker.yml

extract_css: true
をfalseにした事で解消しました。

cssを利用せず、scssを利用していた為、エラーになって表示されていなかったようです。

投稿2021/01/04 05:08

a-ichi

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問