プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

【初心者向け】自力ホームページ制作でHTML/CSS/JavaScriptを学ぶ#2

最終更新日:2019/01/12

この記事は【初心者向け】自力ホームページ制作でHTML/CSS/JavaScriptを学ぶ#1の続きです。

今回は自分の力で作成したホームページを世の中に公開し、友達にみてもらえるようにしていきます。
前回と比べて難易度が上がるので少し大変かもしれませんが、一連の流れを覚えればホームページをサクッと公開できるようになるのでこの機会にぜひ習得しましょう。

使用するのはFirebaseというサービスです。

Firebaseとは

Firebaseとは、Googleの提供するmBaaSです。
mBaasは、mobile backend as a service の略で、直訳するとモバイル用バックエンドサービスです。
その名の通り、モバイル用のバックエンド機能を包括的にサポートしてくれています。

簡単にいうと、フロントエンドさえやればその他は何もしなくていいよ!というサービスです。

FirebaseのHosting機能を使うと、簡単に自分の作成したホームページを世の中に公開することができます。
公開した後にも、リアルタイムチャット等様々な事ができる用になっているので、余力があれば是非挑戦してみてください。

必要なもの

まず今回Firebaseで自分の作ったホームページを公開するにあたって必要なものを紹介します。

  • Googleアカウント
  • Node.js

Firebaseの利用

Googleアカウントのない方は以下のリンクよりアカウントを作成しておいてください。
Google アカウントの作成

Firebase
Firebaseに移動して、コンソールに移動するを選択してください。
Googleアカウントでのログインが求められるので。
ログインしましょう。

hellofirebase

Node.jsのダウンロード

Node.jsはサーバーサイドのJavaScript実行環境です。
NPMというパッケージ管理ツールを使用する為に必要なのでダウンロードしておきましょう。

Node.js

最新版ではなくLTSの自分のデバイスにあったものをダウンロードしてください。

ターミナル(コマンドプロンプト)を開く

Macの場合は、command+spaceでターミナル
Windowsの場合はWindowsキー+R でcmdを入力する事で起動する事ができます。早速起動していきましょう。

凄腕エンジニアがよく使っているやつです。
ターミナル

FirebaseCLiのインストール

ターミナル上で以下のコマンドを入力し、エンターを押しましょう。

node -v

バージョンが表示されれば、先ほどのNode.jsのインストールがうまくいっています。

次にFirebaseCLIをインストールします。

npm install -g firebase-tools

FirebaseCLIはFirebaseを操作する為に必要なもので、先程紹介したパッケージ管理ツールを用いてインストールしています。

次にFirebaseにターミナルからログインしましょう。

firebase login

色々と聞かれますが、全てイエスで問題ありません。
自動的にブラウザ上で新規タブが作成されます。

firebase login

続いて作成したフォルダに移動しましょう。今回はデスクトップ上に作成したので、以下のコマンドで移動する事ができます。

cd desktop/フォルダ名

terminal

続いて初期化します。

firebase init

hosting機能のみを使用するので十字キーでhostingに移動しspaceボタンを押してエンターを押します。

次に新規プロジェクトの作成なのでcreate new projectを選択します。

? Select a default Firebase project for this directory:
[don't setup a default project]
❯ [create a new project]

以降の質問ではyesを選択してください。

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔ Wrote public/404.html
✔ Wrote public/index.html

i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...

✔ Firebase initialization complete!

Project creation is only available from the Firebase Console
Please visit https://console.firebase.google.com to create a new project, then run firebase use --add

プロジェクの初期化が完了しました。
firebase hosting

次にfirebaseで作成したプロジェクトと自分のローカル環境で作成したプロジェクトを紐付けます。

firebase use --add

現在のディレクトリ構造をみてみましょう。
色々のものが作成されています。が、現在はどのページを表示するかの設定でpublicになってしまっていますので以下の画像の通りに反映をさせてください。

次にデプロイ(システムを利用可能な状態にすること)します。

Terminalに記載されたHostingURLにアクセスしてみましょう。
自分のホームページができているのを確認できると思います。

山田太郎のホームページ

The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP