GITでレンタルサーバーにアップロード。やり方とコマンドを完全解説！

PCで作ったサイトをGITを使ってサーバーにアップしたい。手順とコマンド操作の仕方を教えて！

GITは、コードのバックアップのためにも使いますが、
PC上(XAMPPなど)で作成したサイトをサーバーにアップロードしたり、
更新したりする事もできます。

この図のように、GITHUBを介して、サイトをアップロード、更新したり、逆にサーバーからPCにダウンロードしたり、別のPCにデータをコピーしたりといった事が可能になります。

ここでは、Xサーバーを例に、必要なコマンドも含めて、
GITを使ってPCからレンタルサーバーにアップロードする全手順を図解で完全解説します！

これを読めば、あなたもGITを思うがままに使い込ませるようになりますよ！

GITでサーバーにアップロードする時に使うコマンド全行程

まずは、下の図を見てください。
PCからサーバーにファイルをアップロードする時のGITコマンドの流れです。

逆にサーバーからPCにデータをダウンロードする時も全く同じ手順です。

まず、PCからGITHUBにデータをPUSHし、その後、今度はレンタルサーバーからPULLを使って、GITHUBのデータをコピーします。

ちなみに、SourceTreeというGITを見える化するツールを使えば、PCからGITHUBの部分はコマンドを打たなくてもアップロードできるよ。

→SourceTreeのインストール方法2020最新版。GITHUBとつなぐとこまで詳細解説。

Neby

→GITとGITHUBとは？全く分からない初心者向けに図入りでやさしく解説！

GITでレンタルサーバーにアップロードの実例2種。CloneかPullか

ちなみに、実際にデータをアップロードする場合は、Cloneのパターンと、Pullのパターンの2種類があります。

仮にあなたがPC上でウェブサイトを作成して、それをサーバーにアップロードするとします。

最初のパターンとしては、上の図のように、まだサーバーにはサイトがなく、PC上のサイト全ファイルをまるっとサーバーにアップロード(クローン)するパターンです。

次のパターンとしては、下図のようにクローン済みで、PCで変更したサイトデータをサーバーにもアップロードして適用したいパターン(PULL)です。

この初回のCloneパターンと、2回目以降のPullパターンの2種類の全工程をそれぞれ解説していきます。

GITでPCからサーバーにCloneする場合の全コマンド工程

では、まずは、GITを使ってPC→GITHUB→レンタルサーバーという流れで、Cloneをするパターンのコマンド工程を解説します。下図はイメージ図。

PCからGITHUBへまずはアップロード

この手順をくわしく解説します。

ローカルリポジトリの作成

まず、PC上にローカルリポジトリを作ります。

ローカルリポジトリとは、GITにバックアップしたいファイルを入れるフォルダの事だよ。

Neby

まずは、場所はどこでも良いので、新規フォルダを作成してください。

フォルダの名前は、サイト名が良いでしょう。

コマンドプロンプトを立ち上げます。

もし、フォルダがDドライブにあるなら、まずはD: と入力しEnterします。

次にフォルダ内に入り、フォルダまでのパスをコピーします。

cd パス と入力しEnter。画像のパスなら cd D:\website です。

もし、移動先を間違えて戻りたい場合は、 cd .. と入力するたびに、1つ前のディレクリに戻れるよ。

Neby

次に git init と入力しEnter。

これで、ローカルリポジトリができました。

下の画像のように、隠しファイルにチェックを入れると.gitというフォルダが出てきます。これがある場所がレポジトリです。

ここまで出来たら、アップロードしたい全ファイルをこのフォルダにコピーします。

一つポイントとしては、例えば、サイトデータが全部入ったフォルダがあるなら、
そのフォルダの中身のみを全部コピーします。(フォルダ自体はコピーしない)

上の例だと、Japaslangというサイトの全Laravelデータが入ったフォルダがあり、
中身だけ今作ったリポジトリ(フォルダ)にコピーします。

ちなみに、そのサイトデータが入ったフォルダ自体をリポジトリ化しちゃダメなの？そしたらいちいちコピーしなくていいじゃん？

それでもOKだよ。ただ、万が一間違い操作をした場合、このファイル群が上書きされたり、消えたりする可能性もあるよ。GITをよく理解してるなら、それでいいけど、してないうちは、フォルダは分けた方がいいよ。Cドライブにファイルがあるなら、Dドライブにリポジトリを作るって感じ。そうすると、ドラッグするだけで簡単にコピーできるからね。(間違えてファイルを移動してしまう事も防げる)

Neby

→Gitのリポジトリとは？サーバーはリモート？ローカル？図解で解説！

GITのコミットまでの手順

GITのリポジトリの準備が済んだら、コミットをしていきます。

コミットは、今作ったローカルリポジトリにバックアップを保存する行為です。

1. git add . と入力しEnter(リポジトリ内の全ファイルがStageされます)。
2. git commit -m "コメント" と入力しEnter

これだけです。

まず、git add ですが、空白とピリオドを後ろに打てば、全ファイルがCommitへの準備状態になります。なんらかの理由で上げたくないファイルがあるとか、1つ1つのファイルをステージしていく場合は、git add abc\def.php のような感じでファイル名(フォルダに入ってる場合はフォルダも)を入力してEnterを繰り返します。

commit ですが、"コメント"の部分は、今回の変更内容などのメモを書きます。例えば"初回アップロード" とか "ask.phpを変更" とか、"バグを修正"とか、そういうメモを入力します。日本語でOKです。

これで、Commitが完了しました。

→GitのCommitとは？AddやPushとの違いは？初心者向けに図解でやさしく解説！

GITHUBへPushする

実際にGITHUBへPush、つまり今コミットしたデータをまるごとそっくりGITHUBにコピーします。

1. (初回のみ)git remote add origin https://github.com/xx/yy.git
2. git push origin master

まず、初めてローカルリポジトリをリモートリポジトリ(GITHUB)につなぐ場合は、git remote add origin というコマンドを入れます。続くアドレスは、GITHUBのリポジトリからコピーしてきます。

GITHUBにログインし、リポジトリに入ります(ない場合は作ります)

リポジトリの作成方法が分からない場合は、
Gitのリポジトリとは？(GITHUBのリポジトリの作り方)

そもそもアカウントを持ってないなら
GITHUB無料アカウントの作り方最新版。初心者向けに図入りでやさしく解説

次のページで出てくるアドレスを使うわけです。

もしくは

git remote add origin https://github.com/xx/yy.git を入力してEnterしたら、

あとは、git push origin master と入力すれば、完了です。

これで、GITHUBのページを更新してみてください。

こんな感じで、PC側にあったファイルがGITHUBにも反映されてるはずです。

GITHUBからレンタルサーバーへClone

そして、GITHUBにあるファイル群をサーバーへまるっとコピー(クローン)します。

1. ターミナル(TeraTermやRLogin)でサーバーへSSH接続。
2. cdコマンドでクローンしたいディレクトリに移動
3. git clone https://github.com/xx/yy.git
4. githubのユーザー名とパスワードを入力。

これでクローンが完了します。

ディレクトリ = フォルダ。今いる場所の事だよ。

Neby

まず、ターミナルソフトを起動します。これに関しては、コマンドプロンプトではできませんので、別途TeraTermやRLogin などをPCにインストールして使う必要があります。

そして、ターミナルでレンタルサーバーにSSH接続します。

SSH接続の仕方が分からない場合は、「〇〇サーバー SSH接続」「〇〇サーバー ターミナル」のように検索すると、サーバーの公式サイトの接続解説ページが出てきますよ。

Neby

接続したら、今度はGITHUBのデータ(リポジトリ)を丸ごとコピーしたいディレクトリ(フォルダ)に移動します。

分かりやすいようにFTPも交えて解説しましょう。
FTPで自分のサーバー(画像はXサーバー)に入ります。

通常は〇〇.comみたいなアドレスフォルダがまずありますよね？

そしてGITHUB側にnebiというリポジトリがあるとします。

このnebiリポジトリをnebi.comにクローンしたいなら、ターミナルで cd nebi.com とコマンドを打つ事で、まず、nebi.comフォルダ内に移動します。

そして、git clone https://github.com/xx/yy.git とターミナルに入れてEnterすると、自動的にnebiというフォルダとその中身のファイルがGITHUBから全コピーされます。(githubのアドレスはあなたのリポジトリのアドレスにしてくださいね。)

↓nebiリポジトリが生成され、その中にすべてのファイルがクローンされました。

これで、後は、サーバー側でURLとフォルダを紐付ける作業をすれば、nebi.comでnebiリポジトリ内のファイルが表示されるというわけです。

GITでPCからサーバーにPullする場合のコマンド工程

今度は、すでにサーバーにサイトがクローンされてるパターンで、中身のファイルを変更したり、追加したりしたい時のアップロード方法です。

この場合はクローンは完了してるので、PC上とサーバー上に現在全く同じデータがある状態です。

そこに、PC上でデータに変更を加えたり、新たなファイルを追加したとします。

変更結果をPC→GITHUB→レンタルサーバーという経路でアップロードし、
サーバーのデータを上書きします。

PCからGITHUBにPUSHする

今回は、もうリポジトリの設定もすべてCloneの時に完了してますので、簡単です。

1. コマンドプロンプトを立ち上げる
2. cd でローカルリポジトリのフォルダまで移動
3. git add .
4. git commit -m "変更内容を書く"
5. git push origin master

という流れです。

まずは何はともあれ、リポジトリ(アップロード用のフォルダ)にアップロードしたい、もしくは更新したファイルを入れます。

そして、コマンドプロンプトを立ち上げて、リポジトリに移動します。

リポジトリフォルダがDドライブにある場合は、D:と入力してEnterします。

次にフォルダ内に入り、フォルダまでのパスをコピーします。

cd パス と入力しEnter。画像のパスなら cd D:\website です。

もし、移動先を間違えて戻りたい場合は、 cd .. と入力するたびに、1つ前のディレクリに戻れるよ。

Neby

あとは、

1. git add . と入力しEnter(リポジトリ内の全ファイルがStageされます)。
2. git commit -m "コメント" と入力しEnter
3. git push origin master と入力しEnter

git add ですが、空白とピリオドを後ろに打てば、全ファイルがCommitへの準備状態(ステージ状態)になります。更新したくないファイルがあるなどの理由で、1つ1つのファイルをステージしていく場合は、git add abc\def.php のような感じでファイル名(フォルダに入ってる場合はフォルダも)を入力してEnterを繰り返します。

commit ですが、"コメント"の部分は、今回の変更内容などのメモを書きます。例えば "ask.phpを変更" とか、"バグを修正"とか、そういうメモを入力します。日本語でOKです。

そして、次のPushで無事GITHUBへの反映が完了しました。

GITHUBからレンタルサーバーにPullする

後は、サーバーにログインしてPullするだけです。

まず、ターミナルソフト(TeraTerm、RLoginなど)を起動します。

そして、ターミナルでレンタルサーバーにSSH接続します。

次にリポジトリに移動します。リポジトリは、クローンした時に出来たフォルダ(ディレクトリ)の事です。

例えば、nebi.com/nebiというディレクトリに前回クローンした時のデータが入ってるなら、
その cd nebi.com/nebi と入力し、Enterします。

移動先を間違えて戻りたい場合は、 cd .. と入力するたびに、1つ前のディレクリに戻れるよ。

Neby

次にgit pull origin master と入力し、Enterします。

これで完了です。

画像のように、アップロードしたファイル名やdone という表示が出て、エラーが出てなければOKです。

実際にサイトが更新されてるか、ブラウザから確認してみてください。

さて、今回は、全てGITコマンドを使ってレンタルサーバーにアップロードする方法を解説しました。難しいと感じる場合は、冒頭で紹介した、SourceTreeも使うとエラーも減りとても楽になりますよ。

SourceTreeのインストール方法2020最新版。GITHUBとつなぐとこまで詳細解説。