Written by キューピーすきだよ

【実践編】サーバーを借りてサイトを作る方法

2022.01.21

2022.01.21

blog_image

この記事はこんな人向けに!
(初心者向けです。)

「ご当地キューピー一覧サイト」は、ウェブサイト作成初心者の私が、
サイト作成方法から検討し、独学で作成したサイトです。
勉強しながら実際に作成する中で、必要なことをまとめました。

①サーバー構築やプログラミングについて学習したい。

私が「ご当地キューピー一覧サイト」を作成した目的は、

1.ご当地キューピーの魅力を伝えたい
2.サーバー構築の知識を得たい
3.プログラミング学習をしたい

です。

同じ目的を持っている方には、特に参考にしていただけるのではないかと思います。

まずは、サイト作成するための方法はどんなものがあるのかを知り、自分の目的にあった方法を選ぶことが重要です。

②自分のウェブサイトを作ってみたいけど、何から初めて良いか分からない。

サイト作成に必要なもの

サイト作成、公開に必要なものはざっくり下記の通りです。

・ウェブサイトのプログラム
・サーバー環境
・ドメイン
・SSLサーバー証明書
・デプロイツール

ウェブサイトを作成するための方法やサービスは色々あります。
私の選択基準は、

自分が初心者であること、

価格が安いこと、

開発やサーバー環境構築の学習に役立てられること
です。

「ご当地キューピー一覧サイト」を作成するために、検討した結果、
それぞれ下記の通り、選択しました。
・ウェブサイトのプログラム
 →Ruby on Railsで開発、sqlite3を利用
・サーバー環境
 →さくらVPSを利用
・ドメイン
 →さくらのドメインを利用
・SSLサーバー証明書
 →Let's Encryptを利用
・デプロイツール
 →git Hubを利用

まず、学習のために自分で開発をするという目的があるので、それに沿った方法を選択しました。
初心者なので、サービスの利用方法の説明が分かりやすく、ネット上にも導入方法の記事が多そうなものを選択しました。

いきなり大規模なウェブサイトやサービスを作成するわけではないので、サーバーのスペックはそこまで求めません。
しかし、おいおい規模を大きくしたい場合に対応可能かどうかも重要でした。

また、サーバー上で動かすウェブサイトの開発言語が対応しているかどうかも確認が必要です。

サイトを作るためのサービスを知る

今回は自分で作業する中でサーバー環境の知識を得たかったので、
ある程度、サーバーの知識が必要になってくる方法を検討しました。

サーバー環境を利用できるサービスには以下の種類があります。
※利用形態のパターンの名前です。

PaaS (Platform as a Service)
VPS (Virtual Private Server)
IaaS (Infrastructure as a Service)

プログラミング学習やサーバー環境構築の学習が目的でない場合、
もっと簡単にブログやウェブサイトを作成できるサービスは他にたくさんあります。

ブログを書くことが目的であれば、

・はてなblog

・note

など、
専門知識がなくてもすぐに始められるサービスを利用すると良いでしょう。

ウェブサイトを作成するのが目的であれば、

・Wix

・WordPress.com

など、
デザインのテンプレートを選んで利用できるサービスがあります。

テンプレートを利用するのではなく、自分で自由に作成したい場合は、レンタルサーバーを借りて、WordPress.orgをインストールし、利用する方法が一般的です。

ここで言うレンタルサーバーは、有名どころだと、

さくらのレンタルサーバー、

エックスサーバー、

ロリポップ、

ConoHa

などがあります。

WordPress.comとWordPress.orgは、名前が似ていますがサービスや利用方法が違います。

WordPress.comは簡単にウェブサイトを作成できるサービス、WordPress.orgは自分でサーバーを用意してそこでサイト作成するために使うツール
のようなもの(コードを書いたり設定など専門知識が必要)です。

PaaS (Platform as a Service)

サービスとしては、Herokuがあります。

アプリ公開用のプラットフォームがすで用意されていて、
それを利用するサービス形態です。
環境構築する手間を省いて、作成したアプリを手軽に公開できます。

今回は、環境構築もしてみたかったので、利用は見送りました。
また、サーバーが海外にあるのでアクセス速度が遅くならないか気になりました。
アプリを試作してちょっと動かしてみたいという時に、利用してみたいと思います。

VPS (Virtual Private Server)

サービスとしては、さくらVPSが有名です。

さくらVPS

https://vps.sakura.ad.jp/

仮想サーバーを借りて利用するサービス形態です。
OSのインストールから行い、WEBサーバーとして機能するように全て自分で設定を行います。

③さくらVPSでサイト構築をする。

なぜさくらVPS?

今回はこのさくらVPSを利用して、サイトを作成しました。
VPSを選択した理由としては、

・自由度が高く、自分で環境構築ができる
・利用料金が定額で分かりやすい

VPSの中でもさくらVPSを選択した理由は、

・導入手順が分かりやすい
・マニュアルが充実している
・セキュリティソフトが無料で利用できる

です。

初心者なので、とにかく環境構築してウェブサイトを公開できるかというところが一番の重要ポイントでした。
なんとかサイト公開までできたので、さくらVPSを選択して良かったです。

サーバー管理画面などの設定画面も分かりやすく、マニュアルを見ながら設定できました。
使用していて、今のところ、とても満足して使用できています。

今後、CPUの数やメモリ、ディスク容量など拡張できるのも安心です。

ドメインの取得もさくらVPSのサービスを利用することにしました。

ドメインを取得できるサービスは他社のものも使用することもできましたが、スムーズにドメイン設定をしたかったのでサーバーと一緒にさくらのサービスを利用することにしました。

また、さくらのVPS入門ガイドが、とても分かりやすく参考になりました。

ネコでもわかる!さくらVPS講座
blog_image

基本的なことから設定方法まで書いてくれているので、とても役立ちます。
かわいい絵で理解しやすいです。

SSLサーバー証明書は、さくらのサービスではなく、無料で使用できるLet's Encryptを使用しました。
Let's Encrypt(レッツエンクリプト)は、独自ドメインがあれば誰でも発行できる無料のSSLサーバー証明書です。

SSLサーバー証明書は安心なサイトである証明書です。
このサイトとの通信はSSL(通信の仕組みの一つ)を使用し暗号化され、盗み見ることはできません!という証明書です。
URLの横に鍵マークが付いているサイトがSSLサーバー証明書が設定されているサイトです。

サイトを公開する

サーバーを用意したら、作ったプログラムをサーバーに配置する必要があります。
開発したアプリケーションをサーバー上に展開、配置して利用できるようにすることをデプロイと言います。
デプロイツールは、GitHubを使用しています。

簡単にまとめると、手順は以下の通りです。

1.自分のパソコンでプログラムを書くなどの開発作業をして、Gitでアプリケーションのプログラムを管理する。
2.GitHub上にプログラムをアップする。
3.サーバー側からGitHubにアクセスし、アップしたプログラムを取ってきて配置する。

GitとGitHubは別物です。
Gitはプログラムのバージョン管理を行うツールです。
修正履歴などを管理できます。

GitHubはWebサービスです。
Gitでのプログラム管理を便利にしてくれるようなものです。
クラウド上でプログラム管理をしてくれるので、サーバー上にプログラムを配置したり、複数人でプログラム開発をする時に、
GitHubにアクセスすることで、プログラムを取得したり管理したりすることができます。
無料で使用できて、プログラムを全世界に公開するか非公開か選択することも可能です。

④まとめ

今回は、サーバーを借りて自分でサイトを作成するために、どんなものが必要かをまとめました。

中でもVPS選びは重要です。
さくらVPSは、初心者にとって分かりやすく、軽いプランから始められるのが良かったと思います。

2週間無料お試し付きなので、初めてVPSを使用してみるのに最適です。

全てブラウザ上で手続き、操作ができるのですぐに始めることができます。
OSのインストールや初期設定もスムーズです。
色んな設定や操作を行う、コントロールパネルも直感的に分かりやすく、マニュアルや説明も充実しているので、
初心者の方には特におすすめです。

実際に、プログラム開発、サイト公開までは色々な設定作業が必要です。
細かい手順については、また次回以降まとめていきたいと思います。

初めてウェブサイトを作成する方や、プログラミング学習をしたい方に、少しでも参考になれば幸いです。

また次回以降(^^)/~~~

カテゴリー

キューピー (2)

プログラミング (2)

プロフィール

qpsuki

キューピーすきだよ

特にご当地キューピーが好きです。
キューピーコレクターです。
集めたキューピーを一覧にした「ご当地キューピー一覧サイト」の管理人。併設している「キューピーすきだよのブログ」で記事を更新中。キューピー一覧も続々キューピーを追加UPしていますので、ぜひ見て下さい ♪ (・∀・ )

キューピー一覧
  ご当地キューピー一覧サイト

Twitter @QPsukidayo

Instagram qp_sukidayo