# 楽天 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 管理ツールを提供しています。ホストとポートの設定なしで店舗 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)

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

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

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

<!-- 
  楽天が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 タグは必ず改行しないこと