Cで作ったサイトをGITを使ってサーバーにアップしたい。手順とコマンド操作の仕方を教えて！
GITは、コードのバックアップのためにも使いますが、
PC上(XAMPPなど)で作成したサイトをサーバーにアップロードしたり、
更新したりする事もできます。
この図のように、GITHUBを介して、サイトをアップロード、更新したり、逆にサーバーからPCにダウンロードしたり、別のPCにデータをコピーしたりといった事が可能になります。
ここでは、Xサーバーを例に、必要なコマンドも含めて、
GITを使ってPCからレンタルサーバーにアップロードする全手順を図解で完全解説します！
これを読めば、あなたもGITを思うがままに使い込ませるようになりますよ！
もくじ show
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のリポジトリの準備が済んだら、コミットをしていきます。
コミットは、今作ったローカルリポジトリにバックアップを保存する行為です。
git add .と入力しEnter(リポジトリ内の全ファイルがStageされます)。- 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にコピーします。
- (初回のみ)git remote add origin https://github.com/xx/yy.git
- 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にあるファイル群をサーバーへまるっとコピー(クローン)します。
- ターミナル(TeraTermやRLogin)でサーバーへSSH接続。
- cdコマンドでクローンしたいディレクトリに移動
- git clone https://github.com/xx/yy.git
- githubのユーザー名とパスワードを入力。
これでクローンが完了します。
ディレクトリ = フォルダ。今いる場所の事だよ。
Neby
まず、ターミナルソフトを起動します。これに関しては、コマンドプロンプトではできませんので、別途TeraTermやRLogin などをPCにインストールして使う必要があります。
そして、ターミナルでレンタルサーバーにSSH接続します。
SSH接続の仕方が分からない場合は、「〇〇サーバー SSH接続」「〇〇サーバー ターミナル」のように検索すると、サーバーの公式サイトの接続解説ページが出てきますよ。
Neby
接続したら、今度はGITHUBのデータ(リポジトリ)を丸ごとコピーしたいディレクトリ(フォルダ)に移動します。
ポイント
GITHUBからCloneした場合、自動的にファイル群が入ったフォルダが生成されます。
例えば、
yamadaというサイトのデータを丸ごとクローンする場合、
サーバーにyamadaというフォルダを自分で作る必要はありません。
中身のファイルだけがコピーされるわけではなく、GITHUBのリポジトリごとまるっとクローンされるので、自分でyamadaというフォルダを作成してそこにクローンすると、yamadaというフォルダの中にさらにyamadaリポジトリフォルダが生成されてしまいます(二重フォルダになる)。
なので、「サイトデータが入ったフォルダ」を入れたいディレクリに移動します。
分かりやすいように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の時に完了してますので、簡単です。
- コマンドプロンプトを立ち上げる
- cd でローカルリポジトリのフォルダまで移動
- git add .
- git commit -m “変更内容を書く”
- git push origin master
という流れです。
まずは何はともあれ、リポジトリ(アップロード用のフォルダ)にアップロードしたい、もしくは更新したファイルを入れます。
そして、コマンドプロンプトを立ち上げて、リポジトリに移動します。
リポジトリフォルダがDドライブにある場合は、D:と入力してEnterします。
次にフォルダ内に入り、フォルダまでのパスをコピーします。
cd パス と入力しEnter。画像のパスなら cd D:\website です。
もし、移動先を間違えて戻りたい場合は、 cd .. と入力するたびに、1つ前のディレクリに戻れるよ。
Neby
あとは、
git add .と入力しEnter(リポジトリ内の全ファイルがStageされます)。- git commit -m “コメント” と入力しEnter
- 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です。
実際にサイトが更新されてるか、ブラウザから確認してみてください。
ちなみにもし・・
Pullした時に、突然
Merge branch ‘master’ of https://github.com/xx/yy into xserver
# Please enter a commit message to explain why this merge is necessary,
と出て、ターミナルがにっちもさっちも行かなくなった場合は、
GitでPlease enter a commit messageの対処法。3文字で即脱出！
を見て脱出すればPullが完了します。
さて、今回は、全てGITコマンドを使ってレンタルサーバーにアップロードする方法を解説しました。難しいと感じる場合は、冒頭で紹介した、SourceTreeも使うとエラーも減りとても楽になりますよ。
