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

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

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

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

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

0回答

788閲覧

【至急】Nuxt.js, WP REST API, Netlifyを用いた静的サイトの実装で画像が表示されません。

hiroya2989

総合スコア0

Nuxt.js

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

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2021/07/21 07:34

現状

Nuxt.js、WP REST API、Netlifyで静的サイトを制作しています。

ローカルでは、APIの取得、テンプレートへの反映が全てできています。
netlifyでもデプロイが成功しているのですが、
実際のサイトをひらくと、WP REST APIから取得した画像のURLが無効になっており、エラーが出てしまいます。

原因は何と考えられ、どの部分を確認、修正するのが良いのでしょうか?

インターネットで検索しても、有効な解決策が見当たらないためこちらで質問させていただきました。
deployのログは以下のとおりです。

netlify

12:18:19 PM: Build ready to start 22:18:21 PM: build-image version: 6c366b9e0cc38bb3f3a40b7951f398b33cac286d 32:18:21 PM: build-image tag: v3.8.1 42:18:21 PM: buildbot version: 0f3de3d7bd3ff5c1abfa729740350905f7c3f3e8 52:18:21 PM: Fetching cached dependencies 62:18:21 PM: Starting to download cache of 405.5MB 72:18:29 PM: Finished downloading cache in 8.609321123s 82:18:29 PM: Starting to extract cache 92:18:36 PM: Finished extracting cache in 6.91612449s 102:18:37 PM: Finished fetching cache in 15.636953154s 112:18:37 PM: Starting to prepare the repo for build 122:18:37 PM: Preparing Git Reference refs/heads/main 132:18:38 PM: Parsing package.json dependencies 142:18:39 PM: Starting build script 152:18:39 PM: Installing dependencies 162:18:39 PM: Python version set to 2.7 172:18:40 PM: Started restoring cached node version 182:18:42 PM: Finished restoring cached node version 192:18:43 PM: v12.18.0 is already installed. 202:18:44 PM: Now using node v12.18.0 (npm v6.14.4) 212:18:44 PM: Started restoring cached build plugins 222:18:44 PM: Finished restoring cached build plugins 232:18:44 PM: Attempting ruby version 2.7.2, read from environment 242:18:45 PM: Using ruby version 2.7.2 252:18:45 PM: Using PHP version 5.6 262:18:45 PM: Started restoring cached node modules 272:18:45 PM: Finished restoring cached node modules 282:18:46 PM: Installing NPM modules using NPM version 6.14.4 292:18:57 PM: npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents): 302:18:57 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) 312:18:57 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents): 322:18:57 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) 332:18:57 PM: added 24 packages from 37 contributors and audited 1532 packages in 10.154s 342:18:58 PM: 101 packages are looking for funding 352:18:58 PM: run `npm fund` for details 362:18:58 PM: found 2 moderate severity vulnerabilities 372:18:58 PM: run `npm audit fix` to fix them, or `npm audit` for details 382:18:58 PM: NPM modules installed 392:18:58 PM: Started restoring cached go cache 402:18:58 PM: Finished restoring cached go cache 412:18:58 PM: go version go1.14.4 linux/amd64 422:18:58 PM: go version go1.14.4 linux/amd64 432:18:58 PM: Installing missing commands 442:18:58 PM: Verify run directory 452:18:59 PM: ​ 462:18:59 PM: ──────────────────────────────────────────────────────────────── 472:18:59 PM: Netlify Build 482:18:59 PM: ──────────────────────────────────────────────────────────────── 492:18:59 PM: ​ 502:18:59 PM: ❯ Version 512:18:59 PM: @netlify/build 16.0.0 522:18:59 PM: ​ 532:18:59 PM: ❯ Flags 542:18:59 PM: deployId: 60f7ae1b131eca0007384638 552:18:59 PM: ​ 562:18:59 PM: ❯ Current directory 572:18:59 PM: /opt/build/repo 582:18:59 PM: ​ 592:18:59 PM: ❯ Config file 602:18:59 PM: No config file was defined: using default values. 612:18:59 PM: ​ 622:18:59 PM: ❯ Context 632:18:59 PM: production 642:18:59 PM: ​ 652:18:59 PM: ──────────────────────────────────────────────────────────────── 662:18:59 PM: 1. Build command from Netlify app 672:18:59 PM: ──────────────────────────────────────────────────────────────── 682:18:59 PM: ​ 692:18:59 PM: $ nuxt generate 702:19:35 PM: ​ 712:19:35 PM: (build.command completed in 35.8s) 722:19:35 PM: ​ 732:19:35 PM: ──────────────────────────────────────────────────────────────── 742:19:35 PM: 2. Deploy site 752:19:35 PM: ──────────────────────────────────────────────────────────────── 762:19:35 PM: ​ 772:19:35 PM: Starting to deploy site from 'dist' 782:19:35 PM: Creating deploy tree 792:19:35 PM: Creating deploy upload records 802:19:35 PM: 110 new files to upload 812:19:35 PM: 0 new functions to upload 822:19:38 PM: Site deploy was successfully initiated 832:19:38 PM: ​ 842:19:38 PM: (Deploy site completed in 3.2s) 852:19:38 PM: ​ 862:19:38 PM: ──────────────────────────────────────────────────────────────── 872:19:38 PM: Netlify Build Complete 882:19:38 PM: ──────────────────────────────────────────────────────────────── 892:19:38 PM: ​ 902:19:38 PM: (Netlify Build completed in 39.1s) 912:19:38 PM: Caching artifacts 922:19:38 PM: Started saving node modules 932:19:38 PM: Finished saving node modules 942:19:38 PM: Started saving build plugins 952:19:38 PM: Finished saving build plugins 962:19:38 PM: Started saving pip cache 972:19:38 PM: Starting post processing 982:19:38 PM: Finished saving pip cache 992:19:38 PM: Started saving emacs cask dependencies 1002:19:38 PM: Post processing - HTML 1012:19:38 PM: Finished saving emacs cask dependencies 1022:19:38 PM: Started saving maven dependencies 1032:19:38 PM: Finished saving maven dependencies 1042:19:38 PM: Started saving boot dependencies 1052:19:38 PM: Finished saving boot dependencies 1062:19:38 PM: Started saving rust rustup cache 1072:19:38 PM: Finished saving rust rustup cache 1082:19:38 PM: Started saving go dependencies 1092:19:38 PM: Finished saving go dependencies 1102:19:38 PM: Build script success 1112:19:38 PM: Processing form - contact 1122:19:38 PM: Detected form fields: 1132:19:38 PM: - name 1142:19:38 PM: - postal-code 1152:19:38 PM: - address 1162:19:38 PM: - tel 1172:19:39 PM: - email 1182:19:39 PM: - title 1192:19:39 PM: - message 1202:19:41 PM: Post processing - header rules 1212:19:41 PM: Post processing - redirect rules 1222:19:41 PM: Post processing done 1232:19:41 PM: Site is live ✨ 1242:20:18 PM: Finished processing build request in 1m57.588566707s

nuxt.config.jsonの中は以下のとおりです。

nuxt.config.json

1import axios from 'axios'; 2require('dotenv').config() 3const {API_URL, SITE_URL} = process.env 4export default { 5 target: 'static', 6 // Global page headers: https://go.nuxtjs.dev/config-head 7 head: { 8 title: 'cheri', 9 htmlAttrs: { 10 lang: 'ja' 11 }, 12 script: [], 13 meta: [ 14 { charset: 'utf-8' }, 15 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 16 { hid: 'description', name: 'description', content: '' }, 17 { name: 'format-detection', content: 'telephone=no' } 18 ], 19 link: [ 20 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 21 ], 22 }, 23 24 // Global CSS: https://go.nuxtjs.dev/config-css 25 css: [ 26 'destyle.css' 27 ], 28 29 // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 30 plugins: [ 31 '~/plugins/adobe-fonts', 32 '~/plugins/vue-scrollto', 33 '~/plugins/axios.js' 34 ], 35 36 // Auto import components: https://go.nuxtjs.dev/config-components 37 components: true, 38 39 // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 40 buildModules: [ 41 '@nuxtjs/style-resources' 42 ], 43 44 styleResources: { 45 scss: [ 46 '@/assets/styles/vars/*.scss', 47 '@/assets/styles/abstracts/_mixin.scss', 48 '@/assets/styles/_common.scss' 49 ] 50 }, 51 env: {API_URL, SITE_URL}, 52 53 // Modules: https://go.nuxtjs.dev/config-modules 54 modules: [ 55 '@nuxtjs/axios', 56 '@nuxtjs/dotenv' 57 ], 58 59 // Build Configuration: https://go.nuxtjs.dev/config-build 60 build: { 61 postcss: { 62 preset: { 63 autoprefixer: {grid: 'autoplace'} 64 } 65 }, 66 cache: true, 67 hardSource: true, 68 }, 69 70 generate: { 71 fallback: true, 72 interval: 100, 73 routes(callback){ 74 Promise.all([ 75 axios.get('http://cheri-model.com/wp-json/wp/v2/models?_embed'), 76 axios.get('http://cheri-model.com/wp-json/wp/v2/posts'), 77 ]) 78 .then(axios.spread((models, newsPosts) => { 79 // モデル詳細ページ 80 const route_model = models.data.map((model) => { 81 return { 82 route: `/models/${model.id}`, 83 payload : { 84 models: models.data, 85 currentModel: model, 86 } 87 } 88 }) 89 // ニュース詳細ページ 90 const route_newsPosts = newsPosts.data.map((newsPost) => { 91 return { 92 route: `/news/${newsPost.id}`, 93 payload: { 94 newsPosts: newsPosts.data, 95 currentNewsPost: newsPost 96 } 97 } 98 }) 99 //配列を結合してコールバック 100 callback(null, route_model.concat(route_newsPosts)) 101 })) 102 } 103 } 104} 105

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問