Chapter 04無料公開

§3 プロジェクトを更新する

fkuMnk
fkuMnk
2023.01.10に更新
このチャプターの目次
  1. 3-1 ページを編集する
  2. 3-2 Sass
    1. 追加機能のインストール
    2. スタイルシートを記述する
  3. 3-3 TailwindCSS
  4. 3-4 画像の追加
    1. サンプルプロジェクトの確認
    2. Webサイトに画像を表示する
  5. 3-5 デプロイとロールバック
    1. デプロイ(公開)手順
    2. リリース履歴
    3. ロールバック
  6. 絶対たのしい!! Svelteトレーニング 第三回

ここまでは、SvelteKitとFirebaseを使用したWebサイト公開手法の基礎となる部分を学習してきました。ここからは、SvelteKitのプロジェクトを理解し、Webサイトを編集する方法を学習していきましょう。

3-1 ページを編集する

Welcomeページを編集してWebサイトのトップページを作りましょう。

trySvelteKit/static-web/src/routes/+page.svelteファイルを開きます。
このファイルの内容がWebサイトのトップページとして表示されています。
これを下記のサンプルコードで書き換えてみましょう。

+page.svelte
<script>
  let title = "たのしいSvelteKit";
</script>

<header>
  <h1>{title}</h1>
  <p>HTMLとCSSとJavaScriptで作るWebアプリケーションの世界</p>
</header>

<main>
  <div class="hello">Hello World!</div>
</main>

<footer>
  <p>Created by fkuMnk.</p>
</footer>

<style>
  h1 {
    font-size: 2em;
  }
</style>

npm run dev コマンドでサーバーを起動して表示を確認します。

3-2 Sass

突然ですがSvelteでもSassを使ってスタイルシートを書きましょう。
vitePreprocessを使用すると、Svelteファイル内にSCSS構文を書くことができるようになります。

vitePreprocess
https://kit.svelte.jp/docs/integrations#preprocessors-vitepreprocess

追加機能のインストール

  • trySvelteKit/static-web/フォルダでターミナルを開きます。
  • npmコマンドで追加機能をインストールします。
    • npm install -D sass
  • static-web/svelte.config.jsファイルを開き設定項目を追記します。

※1-3新規プロジェクトの作成でTypeScriptを選択した場合は既に設定済です。

svelte.config.js
//import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite'; // 追加

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
          pages: 'build',
          assets: 'build',
          fallback: null,
          precompress: false
        })
    },
    preprocess: vitePreprocess() // 追加
};


export default config;

スタイルシートを記述する

  • static-web/src/routes/+page.svelteファイルを開きます
  • styleタグのlang属性を追加し、値をscssに設定します
  • サンプルコードを参考にCSSを編集します
<style lang="scss">
  header {
    h1 {
      font-size: 2em;
    }
  }
  main {
    .hello {
      font-weight: bold;
    }
  }
</style>

Webブラウザで表示を確認してみましょう

3-3 TailwindCSS

せっかくなのでTailwind CSSも追加しましょう。

  • trySvelteKit/static-web/ フォルダでターミナルを開きます。
  • 下記のnpmコマンドで追加機能をインストールします。
    • npm install -D tailwindcss postcss autoprefixer
  • 下記のnpxコマンドでTailwind CSSを初期化します
    • npx tailwindcss init tailwind.config.cjs -p

static-web/tailwind.config.cjs を開き設定項目を追加します

tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Install Tailwind CSS with SvelteKit - Tailwind CSS
https://tailwindcss.com/docs/guides/sveltekit

Sass内では @apply を使ってTailwind CSSのクラスを指定することができます。static-web/src/routes/+page.svelte を開いてスタイルシートを編集しましょう。

<style lang="scss">
  header {
    h1 {
      font-size: 2em;
    }
  }
  main {
    .hello {
      font-weight: bold;
    }
  }
  footer {
    p {
      @apply text-slate-500 p-2 border border-solid border-slate-300;
    }
  }
</style>

Webブラウザで表示を確認します

3-4 画像の追加

Webサイトに画像を表示させましょう。SvelteKitプロジェクトでどのように画像ファイルが扱われているかを知るために、サンプルプロジェクトを参考にします。

サンプルプロジェクトの確認

trySvelteKit/my-app/フォルダでターミナルを開きます。
npm run dev -- --open を実行し、ブラウザで表示を確認します。

ここでは、Welcomeというメッセージの画像と、Svelteのアイコン画像が表示されていることがわかります。 my-app/src/routes/+page.svelteファイルを開いて中身を確認してみましょう。

imgタグでsvelte-welcome.pngファイルを指定していますが、
my-app/src/routes/フォルダに該当する画像ファイルは存在しません。

SvelteKitでは静的なファイル（アセット）をstaticフォルダに含めます。
my-apps/static/フォルダを確認してみましょう。

該当するファイルが見つかりました。

Webサイトに画像を表示する

static-web/static/フォルダを確認します。 favicon.pngという画像ファイルが見つかりました。このファイルを表示させてみましょう。

static-web/src/routes/+page.svelteファイルを開きます。
headerタグを下記のサンプルコードのように編集してimgタグを追加します。

<header>
  <img src="favicon.png" alt="The Logo of the my website">
  <h1>{title}</h1>
  <p>HTMLとCSSとJavaScriptで作るWebアプリケーションの世界</p>
</header>

trySvelteKit/static-web/フォルダでターミナルを開きます
npm run dev -- --open コマンドでプロジェクトを実行し、Webブラウザで表示を確認します

3-5 デプロイとロールバック

ここまでの編集内容をビルドして、公開（デプロイ）しましょう。

デプロイ(公開)手順

  1. trySvelteKit/static-web/フォルダでターミナルを開きます。
  2. npm run build コマンドでWebサイトをビルドします。
  3. firebase deploy コマンドでWebサイトを公開します。
  4. Hosting URLをWebブラウザで開いて表示を確認します。

※ブラウザのキャッシュが有効になっている場合は、デベロッパーツールを開くか、ページの再読込を試してみて下さい

リリース履歴

  • WebブラウザでFirebaseコンソールを開き、該当のプロジェクトを表示します。
  • プロジェクトのカテゴリから、構築 ・ Hostingを開きます。
  • ダッシュボードのリリース履歴を確認すると、これまでにデプロイされたデータの履歴情報を確認できます。

画面左側のメニューから構築 ・ Hostingへと進みます

本書では、デプロイ時の安心感を高める方法の一つとして、ロールバック機能を紹介しています。併せてGitによるバージョン管理を行うことで、さらなるデプロイ安心環境を高めていくことができるでしょう。

ロールバック

Firebase Hostingには、公開された内容を以前の履歴に遡って元に戻すことができる【ロールバック機能】が用意されています。

ここでは、翌日に公開されるべき内容を誤って公開してしまったという場合を仮定して、ロールバックの機能を試してみましょう。

static-web/src/routes/+page.svelte ファイルを開きます。 mainタグの内容を下記のサンプルコードの通り編集します。

<main>
  <div class="hello">Hello World!</div>
  <div>
    <h2>明日公開されるべき重大発表</h2>
    <p>なんとここには、明日公開されるべき重大な発表内容が掲載されます</p>
  </div>
</main>

編集した内容をビルドしてデプロイしたら、Webブラウザで変更内容を確認しましょう。無事に明日公開されるべき内容が誤って公開されました。

では、ロールバックします。 Webブラウザでリリース履歴を表示し、前回のリリースにカーソルを合わせてメニューを開いたら、ロールバックを選択します。

Hosting URLをWebブラウザで確認し、前回の内容に戻されていることを確認しましょう。

絶対たのしい!! Svelteトレーニング 第三回

npm run dev コマンドの終了を忘れないようにしよう！