見出し画像

【Nuxt.js + Github + Xserver 連携】プッシュプルプルでウェブサイトを公開するの

obachan@50over

2022.9.20追記「元記事よりヒドくないバージョン↓」
【改】Nuxt.js + Github + Xserver連携（ちょっとラクになったバージョン）
https://note.com/obachan_50over/n/nf82964bf9ea1

↓以下、元記事

Nuxt.js + Netlify のウェブサイト公開はラクだった。

なんだけど、Github と Nuxt.js の知識が今よりもっとあやふやな時にチャレンジしたから、表示に問題がでた時にパニクって、泣きながら旧公開レンタルサーバにドメインを振り戻したまま、Netlify に再チャレンジできず今に至る、おばちゃん。

そんなこんなで（AWS とかも敷居が高いし）、結局、Xserver を新しく借りることにしたら、管理画面はわかりやすいし、思ったより色々できそうな予感。もしかして、Netlify のような公開方法とかできちゃったりする？

さっそく、「Git」「Xserver」で検索してみると、Xserver にすでにインストールされている Git で（もしくは最新版をインストールして）マイプライベート Git 環境を作るみたいな壮大な記事が出てきた。

で、調べてる最中に気がついたんだけど、Nuxt.js で「build」「generate」させるには、Node.js を Xserver に用意しなきゃいけない？？

おばちゃん、無理、いろいろ無理・・・

もっと小さい事でいいの。dist フォルダを丸ごと FTP で入れ替えるのが面倒くさいだけなの。差分ファイルだけ更新できれば、それでいいのよぉぉぉ（叫び）

・・・

みつけた。

こちらの記事を参考にしたら、おばちゃんが望んでいることができるかもしれない。

よし手始めに、Github さんが、Xserver さん宅に荷物（dist フォルダ ディレクトリ）をお届けできるように、Xserver さん宅で鍵を作って、Github さんに公開鍵を預けてみる。

Xserver に ターミナル で ssh 接続して、秘密鍵（id_rsa）と公開鍵（id_rsa.pub）を作成

[obachan@sv00000 ~]$ cd .ssh
[obachan@sv00000 .ssh]$ ssh-keygen
[obachan@sv00000 .ssh]$ ls
authorized_keys  id_rsa  id_rsa.pub  known_hosts

Xserver の public_html 直下に任意のディレクトリ（例：deploy）を作成して、

public_html
               └ deploy

# 現在の階層
[obachan@sv00000 deploy]$ pwd
/home/obachan/example.com/public_html/deploy

deploy ディレクトリを Git 用に初期化する

[obachan@sv00000 deploy]$ git init

deploy ディレクトリを初期化して追加された .git/config の内容を表示してみる

[obachan@sv00000 deploy]$ cat .git/config
[core]
	repositoryformatversion = 0
	filemode = true
	bare = false
	logallrefupdates = true

リポジトリの一部だけ取得できるように sparsecheckout という設定を有効化

[obachan@sv00000 deploy]$ git config core.sparsecheckout true

deploy ディレクトリ内の .git/config の内容を再表示。よし、最後尾に入ってる

[obachan@sv00000 deploy]$ cat .git/config
[core]
	repositoryformatversion = 0
	filemode = true
	bare = false
	logallrefupdates = true
	sparsecheckout = true

該当の Github の リポジトリを紐づける

[obachan@sv00000 deploy]$ git remote add origin git@github.com:obachan/example-web-site.git

deploy ディレクトリの .git/config の内容。リポジトリもオッケー

[obachan@sv00000 deploy]$ cat .git/config
[core]
	repositoryformatversion = 0
	filemode = true
	bare = false
	logallrefupdates = true
	sparsecheckout = true
[remote "origin"]
	url = git@github.com:obachan/example-web-site.git
	fetch = +refs/heads/*:refs/remotes/origin/*

Github 側の dist を sparse-checkout に含めるために書き込む

[obachan@sv00000 deploy]$ echo dist > .git/info/sparse-checkout

よし、用意万全。ようやく、Github さんから Xserver さんに dist を お届けする時が来た。
題して、プッシュプルプル大作戦。

◆作戦（其の一）

該当の Github の develop ブランチに、普通は push しない「dist フォルダ」を含めて push する。

◆作戦（其の二）

develop ブランチの内容を main ブランチへ pull させる。

◆作戦（其の三）

Xserver の deploy ディレクトリの中にいる状態で、Github の main ブランチの dist を pull する。

[obachan@sv00000 deploy]$ git pull origin main

出来た・・・。deploy ディレクトリの中に dist がいるヾ(*´∀｀*)ﾉ
だが、あともう少し・・・

2022.1.4追記「URLアドレスが妙なことになっている（現況）」

以下の htaccess の記述でリライトさせると、ウェブサイトの表示は問題ないのですが、リロードすると URL アドレスが変わってしまいます。

Nuxt.js にはルーティングの機能があり、サブディレクトリに配置する場合は、nuxt.config.js に設定を記述しなければならないようです。

2022年も間抜けな状況で明けてしまった・・・（とほほ）

2022.1.7追記「後日談書きました」
【Github + Webサイト更新】しかも原始的な方法で
https://note.com/obachan_50over/n/n730464e48698


（以下、今回は上手くいかなかったけど残す個人メモ的文章）

公開ウェブサイトの /index.html（ルート）が２階層も潜り込んでしまったので、.htaccess の階層部分を書き直します。

/home/obachan/example.com/public_html/.htaccess

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^$ deploy/dist/ [L]
RewriteRule (.*) deploy/dist/$1 [L]
</IfModule>

/home/obachan/example.com/public_html/deploy/.htaccess

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /deploy
RewriteRule ^$ dist/ [L]
RewriteRule (.*) dist/$1 [L]
</IfModule>

/home/obachan/example.com/public_html/deploy/dist/.htaccess

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /deploy/dist
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]
</IfModule>

Git（バージョン管理システム）のおかげで、これからはプッシュプルプルだけで差分ファイルのみ更新していけます。（感涙）

この記事が参加している募集

やってみた

35,519件

WEBデザイナー（自営業）のおばちゃんです。最近はBlenderネタ多めです。