

今回はXserverVPSを使ってNuxtアプリを作って公開したいと思います。Nuxtアプリを公開したいけどどうやってXserverVPSで公開するんだろう?と気になっている方は参考にしてみてください。
- XserverVPSでサーバーを立てる
- XserverVPSにSSH接続する
- XserverVPSにNuxtアプリを作成する
XserverVPSでNuxtアプリを公開していきましょう。
XserverVPSでサーバーを立てる
まずはXserver VPSでサーバーを立てます。具体的な申し込み手順は以下の記事で詳しく書いているので、わからなかったら参考にしてみてください。
Ubuntuでサーバーを立てる
今回はOSだけ選択してサーバーを立ててやろうと思います。アプリケーションでnode.jsを選択すれば、node.jsを使えるサーバーに設定してくれるからそれでもいいかもしれないですね。
(ちなみにOSの再インストールなんかは後でもできるので、ここでミスっても大丈夫です)
- サーバー名・・・管理画面に表示されるサーバー名(自分で決めることも可能)
- プラン・・・メモリの選択(2GBプランがお勧め)
- サーバーの契約期間・・・サーバーの契約期間(12ヶ月がお勧め)
- イメージタイプ・・・OSやアプリケーションの選択(アプリケーションの場合は選択したアプリケーションが使える環境を作ってくれる)
- rootパスワード・・・rootユーザーのパスワード
- SSH Key・・・SSH Keyを作成するかどうか

SSH Keyは自分で作成したものを手動でサーバー内に設定することもできますが、ここでやっておくと作ってくれるので楽です。秘密鍵もダウンロードすることができます。
立てたサーバーにSSH接続する
立てたサーバーにはSSH接続して作業したいのでSSH接続します。SSH接続する方法に関しては以下の記事で書いたので、わからなかったら参考にしてみてください。
Ubuntuの初期設定を行う
$ apt update
$ apt upgrade
ユーザーがrootしかいないので、作業用のユーザーを作成します。
// /home/tanakaが作成される
$ adduser tanaka
// 作成したユーザーにsudo権限を付与する
$ gpasswd -a kobayashi sudo
// 公開鍵を作成したユーザーの.sshディレクトリに配置する
$ mkdir /home/tanaka/.ssh
$ cp /root/.ssh/authorized_keys /home/tanaka/.ssh/.
// パーミッション変更
$ chmod 700 /home/tanaka/.ssh
$ chmod 600 /home/tanaka/.ssh/authorized_keys
// ディレクトリの所有者とグループを設定する
$ chown tanaka:tanaka .ssh
$ chown tanaka:tanaka .ssh/authorized_keys
これでSSH接続を解除して、今度は作成したユーザーでSSH接続します。
$ ssh -i xserver-vps-ssh-key.pem 作成したユーザー@IPアドレス
これで作成したユーザーでSSH接続することができました。
Node.jsをインストールする
Node.jsをインストールします。nodenvを使ってやりますが、好きなもの使ってインストールしてください。
$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc
$ eval "$(nodenv init -)"
$ source ~/.bashrc
// node-buildのインストール
$ git clone https://github.com/nodenv/node-build.git $(nodenv root)/plugins/node-build
// この記事を書いている段階での安定版をインストール
$ nodenv install 18.16.0
$ nodenv global 18.16.0
Nuxtアプリケーションを作成する
npmをインストールしてnpx create-nuxt-appでNuxtアプリケーションを作っていきます。
$ sudo apt install npm
$ npx create-nuxt-app sample
これでsampleっていう名称でアプリケーションが作成されました。
この作成したアプリケーションをとりあえずブラウザで表示させたいので、少し設定を編集します。nuxt.config.jsを開いてserverのhostにIPアドレスを入力します。
build: {
},
// xserverのIPアドレスを入力
server: {
host: '162.xx.xx.xx'
}
これでbuildしてstartしてブラウザからIPアドレス:3000でアクセスしてみる。
$ npm install
$ npm run build
$ npm start
表示されましたね。本当はWebサーバー通してNuxtjsの画面表示させたいので、nuxt.config.jsの設定をいじることはしませんが、あくまで確認のために編集して表示させてみました。
確認が済んだらnuxt.config.jsは元の記述に戻しておきましょう。
Nginxをインストールする
Nginxをインストールして、NginxからNuxtのサーバーへ向き先を設定したいと思います。
// nginxインストール
$ sudo apt install -y nginx
// nginx起動
$ sudo systemctl start nginx
// status確認
$ sudo systemctl status nginx
これでIPアドレスをブラウザに入力するとnginxの初期画面が表示されました。
設定ファイルを記述する
Nuxtと繋げるようにNginxの設定ファイルを記載します。
$ sudo vim /etc/nginx/conf.d/nuxt_app_nginx.conf
server {
listen 80;
server_name IPアドレス;
location / {
proxy_pass http://localhost:3000;
}
}
最低限の記述しかしていないけど、これでNuxtと繋げるはず。設定ファイルを記載したらnginxは再起動しておこう。
$ sudo systemctl restart nginx
Nuxtアプリを起動して確認する
nuxtアプリを起動してIPアドレスから確認してみましょう。
$ npm run build
$ npm start
これでXserverVPSのIPアドレスを確認すると無事表示できました。
まとめ
XserverVPSでNuxtアプリケーションを作成して公開するっていうことをやってみたけどできましたね。IPアドレスじゃなくてドメインを設定するにはちょっと面倒だけど、NginxとNuxtでアプリケーションを公開するっていうことができました。
もし同じようなことをしてみたかったらXserver VPSで試してみるといいでしょう。