【レンタルサーバー】ロリポップにVue.jsプロジェクトをデプロイするまで【Vue3系】

HTML/CSS
2022年02月12日14:42
この記事は約12分で読めます。

この記事の最終更新日: 2023年2月2日

Vue.jsプロジェクト(Vue3系&TypeScript)のロリポップへのデプロイ作業が、思ったより一筋縄でいかなかったので記事にまとめておきます。

この記事の流れを追っていけばスムーズにデプロイできると思います。

FTPソフトをダウンロード

まずはFTPソフトをダウンロードします。

私がダウンロードしたのは「Cyberduck」（ブラウザでダウンロードすると無料）です。

WindowsならFFFTPなど、使いやすいと感じるものを使いましょう。

（特にこだわりがなければCyberduckを使いましょう。）

Vue.Jsプロジェクトを作成

Vue CLIからサクッとプロジェクトを作成します。

まずはVue CLI(3系)をグローバルにインストールします。

#2系のVue CLIが入っているとエラーになるのでアンインストール
$ npm uninstall -g vue-cli
#Vue CLIをインストール
$ npm install -g @vue/cli
#プロジェクトを作りたいディレクトリで実行
$ vue create vue-project-sample

#選択肢が出るので、Manually select features へ移動してEnter
$ Vue CLI v4.5.15
$ ? Please pick a preset:
$    Default ([Vue 2] babel, eslint)
$    Default (Vue 3) ([Vue 3] babel, eslint)
$  ❯ Manually select features

# スペースで全部チェックをつけます。
# そしてEnterをクリック。
Vue CLI v4.5.15
$ ? Please pick a preset: Manually select features
$ ? Check the features needed for your project: (Press <space> to select, <a> to t
$ oggle all, <i> to invert selection)
$ ❯◉ Choose Vue version
$  ◉ Babel
$  ◉ TypeScript
$  ◉ Progressive Web App (PWA) Support
$  ◉ Router
$  ◉ Vuex
$  ◉ CSS Pre-processors
$  ◉ Linter / Formatter
$  ◯ Unit Testing
$  ◯ E2E Testing

# 2系か3系か選びます。3系を選ぶ。
$ ? Choose a version of Vue.js that you want to start the project with (Use arrow
keys)
$   2.x
$  ❯3.x

# TypeScriptの記述法を聞かれています。class-styleという方法で記述する場合はy。(基本はこれで良いかと。)
$ ? Use class-style component syntax? (y/N)

# Babelを使用するか yes
$ ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n)

# 使用するURLの形式。historyかhashか。一般的なのはhistoryなのでyes
$ ? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n)

# CSS プリプロセッサは何を使用するか。with dart-sassを選択(node-sassを選んだらエラーになりました。)
$ ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
$   ❯ Sass/SCSS (with dart-sass)
$  Sass/SCSS (with node-sass)
$  Less
$  Stylus

# リンターとフォーマッター。ESLint + Prettierが一般的。
$ ? Pick a linter / formatter config: (Use arrow keys)
$  ESLint with error prevention only
$  ESLint + Airbnb config
$  ESLint + Standard config
$ ❯ ESLint + Prettier
$  TSLint (deprecated)

# リントを実行するタイミング。aで全部選択できます。どちらでも良いです。
$ ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
 > to invert selection)
$ ❯◉ Lint on save
$  ◉ Lint and fix on commit

# Babel、PostCSS、ESLintなどの設定を個別の設定ファイルかpackage.jsonか選択。
$ ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
$  ❯ In dedicated config files
$   In package.json

# ここまでの設定をプリセットとして、次回以降プロジェクト作成の時に選択できるようにするか。(yes)
$ ? Save this as a preset for future projects? (y/N)

# プリセット名は適当でいいです。
$ ? Save preset as: mydefault

Vueプロジェクトをビルド

Vueファイルをロリポップに上げても動作しないので、

ビルド後のjsファイルをFTPソフト経由でロリポップにアップロードします。

プロジェクト直下にvue.config.jsファイルを作成

まず、プロジェクト直下に「vue.config.js」を作成。

ここにパスの設定を追加。これがないとデプロイした時にパスが通りません。

module.exports = {
    publicPath: './',
}

src/App.vueを編集

サーバに置いた時のパスを揃えておきたいので、以下のように修正します。

（後で解説しますが、サーバにアップロードする時はdistディレクトリをの名前をappに変更してからアップロードします。）

<template>
  <div id="nav">
    <router-link to="/app">Home</router-link> |
    <router-link to="/app/about">About</router-link>
  </div>
  <router-view />
</template>

src/router/index.tsを編集

こちらもパスにappをつけてやります。

const routes: Array<RouteRecordRaw> = [
  {
    path: "/app",
    name: "Home",
    component: Home,
  },
  {
    path: "/app/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

画像を使用するときはサーバに直接画像ディレクトリを作成して、「https://~」で指定してやる。

ビルドの関係で、画像表示のパスが通らなかったり、再描画の際に表示されなくなったりします。

ロリポップサーバの適当な階層に「img」ディレクトリを作って、直接指定してやると楽です。

私はyurupro.cloudというドメインの配下にimgディレクトリを作成し、logo.pngとfavicon.icoを移動させました。

例 src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="https://yurupro.cloud/img/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

例 public/index.html

<!DOCTYPE html>
<html lang="">
~
    <link rel="icon" href="https://yurupro.cloud/favicon.ico">
~
</html>

一応動作確認してみます。

$ npm run serve
ゆるプロ日記　レンタルサーバーにVueプロジェクトをデプロイ

特に問題なければビルドします。

$ npm run build

これからbuild済のファイルが入った、distフォルダをロリポップにデプロイ（アップロード）します。

FTPソフトウェアの設定

ロリポップとFTPソフトウェアの設定を済ませます。公式↓

Mac Cyberduckの設定 / ファイル管理 / マニュアル - ロリポップ！レンタルサーバー
ロリポップ！レンタルサーバーのご利用マニュアル FTPソフト(Mac Cyberduck)の設定を説明したマニュアルページです。
lolipop.jp

失敗したら、FTPアクセス権限ページやIPアドレスを確認してみてください。

FTPソフトウェア経由でアップロード

やること

・imgディレクトリの作成＆画像を入れる

・distをコピー

・コピーしたdistディレクトリの名前をappに変更

・ドメイン直下にappディレクトリをアップロード

以上で完了です。

お好みでVueプロジェクトにTailWindCSSを導入する場合

# 互換性のあるモジュールが必要なので、入っていたらアンインストール。
＄npm uninstall tailwindcss postcss autoprefixer

#インストール
$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# tailwindCSSとpostCSS設定ファイルを作成
$ npx tailwindcss init -p

postcss.config.jsファイルと、tailwind.config.jsファイルが生成されます。

tailwind.config.jsファイルを編集

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./src/**/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/index.cssファイルを作成

内容を以下の通り。

@tailwind base;
@tailwind components;
@tailwind utilities;

src/main.tsにimport “./index.css”;追記

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import "./index.css";

createApp(App).use(store).use(router).mount("#app");

確認にsrc/views/Home.vueファイルに記述してみる

以下の1行をsrc/views/Home.vueに記述してみる。

<div class="text-5xl text-bold bg-pink-600">tailwind css</div>
<template>
  <div class="home">
    <div class="text-5xl text-bold bg-pink-600">tailwind css</div>
    <img alt="Vue logo" src="https://yurupro.cloud/img/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

@Options({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}
</script>

適用されていれば完了。

お疲れ様でした。

コメント

タイトルとURLをコピーしました