SlideShare a Scribd company logo
クリック一つでローカルウェ
ブサーバーを起動しよう
開発環境をワンクリックで立ち上げたいと思ったことはありませんか?今日
はそんな便利な方法をご紹介します。
GeneLab
今回の目標
アイコンのダブルクリックだけ
面倒なコマンド入力なしでローカルサーバーを起動します。
ライブサーバーの自動起動
コードの変更をリアルタイムで確認できます。
ブラウザの自動オープン
サイトが自動的にブラウザで表示されます。
事前準備
Node.jsの確認
ターミナルで node -v と入力します。
バージョン番号が表示されればOKです。
Homebrewのインストール
未インストールの場合は公式スクリプトを実行します。
Node.jsのインストール
brew install node でインストールできます。
Homebrewのセットアップ
/bin/bash -c "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/HEAD/inst
all.sh)"
インストールスクリプトの実行
ターミナルで以下のコマンドを実行します。
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >>
~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
パスの設定
以下のコマンドで環境変数を設定します。
動作確認
brew --version でインストールを確認します。
Live Serverのインストール
npm install -g live-server
グローバルインストール
ターミナルで以下のコマンドを
実行します。
live-server --version
インストール確認
バージョンを確認してみましょ
う。
動作テスト
任意のフォルダで live-server と入力して動作確認します。
起動スクリプトの作成
ファイル作成
任意の名前.command ファイルを作成
します。
スクリプト記述
以下のコードをファイルに記述しま
す。
権限設定
chmod コマンドで実行権限を付与しま
す。
動作確認
ファイルをダブルクリックして動作確
認します。
スクリプトの内容
サーバー起動
指定ディレクトリでライブサーバーを起動します
待機処理
サーバー起動の完了を待ちます
ブラウザ起動
自動的にブラウザでサイトを表示します
#!/bin/bash
live-server "ターゲットディレクトリのパス" --port=5503 &
sleep 3
open "http://127.0.0.1:5503/index.html"
完成!使い方
chmod +x /ファイルのあるパス/任意の名前.command
権限の付与
以下のコマンドでファイルに実行権限を付与します。
アイコンをダブルクリック
デスクトップなど好きな場所に置いたアイコンをダブルクリックしま
す。
自動的にサイトが開く
ブラウザが起動し、ローカルサイトが表示されます。
コードの編集
ファイルを編集すると自動的にブラウザが更新されます。

More Related Content

PDF
Storytelling For The Web: Integrate Storytelling in your Design Process
PDF
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
PDF
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
PDF
2024 Trend Updates: What Really Works In SEO & Content Marketing
PDF
Considerations-on-GenerativeAI-and-Copyright.pdf
PDF
AIDemucs-set-up-guide-on-apple-silicon.pdf
PDF
2024 State of Marketing Report – by Hubspot
PDF
Everything You Need To Know About ChatGPT
Storytelling For The Web: Integrate Storytelling in your Design Process
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
2024 Trend Updates: What Really Works In SEO & Content Marketing
Considerations-on-GenerativeAI-and-Copyright.pdf
AIDemucs-set-up-guide-on-apple-silicon.pdf
2024 State of Marketing Report – by Hubspot
Everything You Need To Know About ChatGPT
Ad

e2zgvpmeefekeoekeokoeoekewassa4jfstg6p.pdf