Rails6 + Nuxt.jsでSPAに挑戦する[環境構築]

今日から、Ruby2.6.8　Rails6　Nuxt.jsの組みあわせでポートフォリオ作成に挑戦します。

まず前提として、環境は
Windows Subsystem for Linux 2にUbuntu20.04LTSを
載せた状態になります。

フォルダ構成は、
(ubuntuホームディレクトリ)/environment/appname
です。ワークスペースを作ってわかりやすくしたかったので、mkdirでenvironmentを作っています。

#ubuntu CLI
rails new [appname] --database=postgresql --skip-bundle --api

[appname]部分は、カッコも含めて外して任意の名付けをして下さい。
apiモードでアプリを新規作成し、DBはPostgres使用です。
（Postgresのロール作成・PASS設定などは割愛します。）

#ubuntu CLI
sudo /etc/init.d/postgresql start

でデータベースを起動して、

#ubuntu CLI
bundle install
rails db:create
# (rails serverでもOK)サーバー起動
rails s

DBのロール作成、ログインができていれば、
ブラウザでlocalhost:3000に移動して、Railsの初期ロゴ画面が見えているはずです。

次に、Nuxt.jsをyarnを使ってRailsアプリの中にインストールします。

#ubuntu CLI
yarn create nuxt-app [appname]

僕の場合、Nuxt構成時は以下のように選択しました。

#ubuntu CLI
✨  Generating Nuxt.js project in f_Idea
? Project name: f_Idea
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? yourname
? Version control system: Git

Press to select ~ となっている部分は選択なしで進んでいます。
これが完了してから、

# [appname/nuxt.config.js]
export default {
  server: {
    port: 8080
  },
# 以下はNuxtインストール完了時と変えていないので省略

rails側のlocalhostポートと衝突するので、Nuxt側のポートを8080に変更します。ここまでやると、

#ubuntu CLI
cd　[appname] #アプリのフォルダへ移動
yarn dev #Nuxt.js起動

localhost:8080にアクセスすると、Nuxt.js/Vue.jsのロゴが出ているはずです。

今回は、環境構築部分のみです。キリがいいので、今回はここまでです。お疲れ様でした。