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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

静的サイトジェネレータ

静的サイトジェネレータは、何かしらの言語で書いたコードからHTML/CSS/JavaScriptによる静的なWebサイトを生成するツール。表示が高速で安定したサイトを運用することが可能です。セキュリティリスクの軽減やサーバへのアクセス負荷が少ないといった利点があります。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

Q&A

1回答

3778閲覧

nuxt generateをして生成されたdist配下でscriptが動かない

iamudaemon

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

静的サイトジェネレータ

静的サイトジェネレータは、何かしらの言語で書いたコードからHTML/CSS/JavaScriptによる静的なWebサイトを生成するツール。表示が高速で安定したサイトを運用することが可能です。セキュリティリスクの軽減やサーバへのアクセス負荷が少ないといった利点があります。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

0グッド

0クリップ

投稿2021/01/23 07:48

編集2022/01/12 10:55

前提・実現したいこと

nuxt generateで静的ファイルを作ってAWSのS3にホスティングしたいです。
ローカルで開発をしている際は
nuxt generate → nuxt start
をするとjavascriptが正しく機能するのですが、
S3に上げるとjavascriptが正しく動かなくなります。

https://teratail.com/questions/147936
こちらの質問者様と同じ悩みだと思うのですが、
SPAモードではなくSSGで実現したいです。

該当のソースコード

vue

1<template> 2 <div class="container"> 3 <button @click="alert()">click</button> 4 </div> 5</template> 6 7<script> 8export default { 9 methods: { 10 alert() { 11 alert('test') 12 }, 13 }, 14} 15</script>

試したこと

nuxt generate → nuxt start
だとうまくアラートが出たのですが、dist配下をS3にアップロードするとjavascriptが動きません。
S3にただ上げるだけではなく、パスの指定などを行う必要があるのでしょうか?

nuxt startをした時に
Serving static application from dist/
と表示され、
http://localhost:3000/
で確認できるようになるのですが、こちらとS3に上げた時の挙動がどう変化するのかが知りたいです。
ど素人な質問ですみません、よろしくお願い致します。

[追記]

nuxt.config.js

1export default { 2 // Target: https://go.nuxtjs.dev/config-target 3 target: 'static', 4 5 // Global page headers: https://go.nuxtjs.dev/config-head 6 head: { 7 title: 'test', 8 htmlAttrs: { 9 lang: 'en', 10 }, 11 meta: [ 12 { charset: 'utf-8' }, 13 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 14 { hid: 'description', name: 'description', content: '' }, 15 ], 16 link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }], 17 }, 18 19 // Global CSS: https://go.nuxtjs.dev/config-css 20 css: [], 21 22 // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 23 plugins: [], 24 25 // Auto import components: https://go.nuxtjs.dev/config-components 26 components: true, 27 28 // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 29 buildModules: [ 30 // https://go.nuxtjs.dev/eslint 31 '@nuxtjs/eslint-module', 32 // https://go.nuxtjs.dev/stylelint 33 '@nuxtjs/stylelint-module', 34 ], 35 36 // Modules: https://go.nuxtjs.dev/config-modules 37 modules: [], 38 39 // Build Configuration: https://go.nuxtjs.dev/config-build 40 build: {}, 41}

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

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

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

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

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

guest

回答1

0

SSGしたあとはただのHTMLとJSファイルです。
Nuxtのことは頭の隅っこにおいて、HTMLとJSで何で動かないかを考えましょう。
まずは右クリックして「検証」からエラーログをみましょう!

投稿2021/01/23 08:02

mikkame

総合スコア5036

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

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

iamudaemon

2021/01/23 08:14

回答ありがとうございます。 現在こちらにアップロードしておりまして、 https://portofolio-test.s3-ap-northeast-1.amazonaws.com/index.html click時に特にエラーが出ず、networkタブを見ても特にエラーは出てないように思えるのですが、 index.htmlがついていないと表示出来なくなっている部分に問題があるのでしょうか??
mikkame

2021/01/23 08:24

拝見しました。できると思うんだけどな〜と思うんですが とりあえずclient-onlyタグで囲ってみてはどうでしょうか
iamudaemon

2021/01/23 08:42

再度ご確認頂きありがとうございます..! buttonの部分をclient-onlyタグで囲ったバージョンは別でこちらに上げてみましたが、何も表示されず。。 https://client-only.s3-ap-northeast-1.amazonaws.com/index.html またnuxt.config.jsに問題あるのかと思い、そちらも追記させて頂きました。
mikkame

2021/01/23 09:09

新しいバージョンの方はJSがよまれてません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問