# 楽天 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

関連記事

Nuxtjs 3 に Ant design Vue を使う
Nuxtjs build WARNING in entrypoint size limit
Nuxtjs axios リクエストのヘッダー設定
Nuxtjs titleTemplate の設定
Nuxt.js でフロントエンドのカテゴリ選択
web 開発でよく使うリダイレクトと nuxtjs redirect
localStorage is not defined に遭遇した時の対応
nuxtjs の wpa を実装した時のメモ
vuejs スクロールでナビバー表示非表示
nuxtjs のページごと head の title description 変更
Nuxtjs に iview 4.0 入れた動かしてみた