# 楽天 GOLD に Nuxt で作った HP デプロイ公開した話

楽天市場ショップ HP 構築の仕事が来たので、vuejs でフレームワーク Nuxt で HP 作成して楽天 GOLD にデプロイ公開しました。

# 楽天 GOLD とは

楽天 GOLD は楽天が出店者に提供する WEB サーバーで 100MB 無料で誰でも利用できる機能です。お金払えば、最大 1GB まで利用できます。PHP や JAVA などのプログラム言語は利用できないが、HTML、CSS、Javascript は利用可能。通常の楽天ショップ URLhttps://rakuten.ne.jp/ショップIDに対して楽天 GOLD はhttps://rakuten.ne.jp/gold/ショップIDのようにショップ ID の前に gold が付きます。自由に作成した HTML ファイルを楽天 GOLD のサーバーアップするだけで公開されるので、RMS でデザイン構成するより文字数無制限、仕様タグ無制限の自由度が高いページ作成できることが最大のメリットです。

# 申し込み

利用するには申込みが必要で拡張サービス一覧メニューから楽天 GOLD  新規利用の申し込みができます。

  • 拡張サービス一覧
    • 楽天 GOLD  新規利用/容量変更申請
    • 楽天 GOLD 利用容量変更申請フォーム

申し込み完了したら、店舗 ID楽天 GOLD のパスワードを入力して FTP サーバーに接続できます。

# FTP 接続情報

プロパティ
プロトコル FTP
エンクリプション No encryption
ホスト ftp.rakuten.ne.jp
ポート 16910
ユーザーネーム 店舗 ID
パスワード 取得した FTP パスワード

楽天が初心者向けに無料の FTP 管理ツールを提供しています。ホストとポートの設定なしで店舗 URL と楽天 GOLD のパスワードを入力するだけで接続可能です。

# 楽天 GOLD に合わせて Nuxt 設定

作成した Nuxt ページは楽天 GOLD にアップするだけでは動きません!なぜなら baseURL が違うし、ディレクトリ構成もルート/から作られています。

nuxt.config.js





 




 




  bootstrapVue: {
    icons: false
  },
  router: {
    base: "/gold/ショップID/"
  },
  build: {
    extend(config, { isDev }) {
      if (!isDev) {
        config.output.publicPath = "https://rakuten.ne.jp/gold/ショップID/_nuxt/";
      }
    }
  }

やること

  • routerでベース URL 設定
  • build extentに webpack 設定 開発環境以外に出力 publicPath 設定

Nuxtjs build config (opens new window)

\_nuxt ディレクトリを CDN に変更設定

デフォルトシステムファイルは_nuxtディレクトリに置かれていますが、CDN に設定する場合 nuxt.config.js に設定変更

nuxt.config.js

export default {
  build: {
    publicPath: "https://cdn.nuxtjs.org",
  },
};

nuxt buildした際に.nuxt/dist/clientディレクトリを CDN サーバーにアップすれば OK

# 楽天ショップ内検索フォーム

| action | https://esearch.rakuten.co.jp/rms/sd/esearch/vc |

Name Type 値説明
sv hidden 6 固定
sid hidden 店舗 ID
su hidden 店舗 URL
sn hidden 店舗名
A hidden f 固定?
sitem text 検索キーワード
nitem text 除外キーワード
st text and or 指定 A すべて含む O いずれかを含む
min text 価格範囲指定 最小
max text 価格範囲指定 最大
s text 検索結果並び順指定 1標準 2価格安い 3価格高い 4感想多い
<!-- 
  楽天がform終了タグが見つからないエラー
  <form
  method="get"
  action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc"
  class="my-3"
  > 

  正しい
  <form method="get" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" class="my-3">
-->
<form
  method="get"
  action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc"
  class="my-3"
>
  <input type="hidden" name="sv" value="6" />
  <!--店舗ID-->
  <input type="hidden" name="sid" value="375170" />
  <!--店舗URL-->
  <input type="hidden" name="su" value="rakuten-shop" />
  <!--店舗名-->
  <input type="hidden" name="sn" value="楽天ショップ" />
  <input type="hidden" value="A" name="f" />
  <!--検索キーワード-->
  <input
    id="searchbox"
    type="text"
    name="sitem"
    class="form-control p-0 h-auto border-dark"
  />

  <input
    id="sendButton"
    value="商品検索"
    type="submit"
    class="btn btn-sm border btn-dark"
  />
</form>
  • form タグは必ず改行しないこと
2021-02-08
  • nuxtjs
  • EC

関連記事

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1000 KiB). This can impact web performance
Nuxtjs axios リクエストのヘッダー設定
Nuxtjs titleTemplate の設定
Nuxt.js でフロントエンドのカテゴリ選択
web 開発でよく使うリダイレクトと nuxtjs redirect
localStorage is not defined に遭遇した時の対応
nuxtjs の wpa を実装した時のメモ
vuejs スクロールでナビバー表示非表示
nuxtjs のページごと head の title description 変更
Nuxtjs に iview 4.0 入れた動かしてみた