在 Laravel 中使用 SSR 的 Nuxt——最基礎 SSR 頁面

家豬配種專家發表於2020-06-21
LaravelUX

1. 首先新建一個全新的 Laravel 專案 weibo

composer create-project laravel/laravel weibo

（演示裡我將給這個專案分配 weibo.test 域名）

2. 我們將把 nuxt 工程的所有檔案放到 laravel 專案中的 client 資料夾中

修改預設的 package.json 如下

{
    "private": true,
    "scripts": {
        "dev": "node_modules/nuxt/bin/nuxt.js -c client/nuxt.config.js",
        "build": "node_modules/nuxt/bin/nuxt.js build -c client/nuxt.config.js",
        "start": "node_modules/nuxt/bin/nuxt.js start -c client/nuxt.config.js",
        "lint": "eslint --fix --ext .js,.vue client/",
        "prod": "npm run build && npm run start"
    },
    "config": {
        "nuxt": {
            "host": "0.0.0.0",
            "port": "3000"
        }
    },
    "dependencies": {
        "nuxt": "^2.13.0"
    }
}

同時我們新增一個最基礎的 client/nuxt.config.js

module.exports = {
    srcDir: __dirname,
    watchers: {
        webpack: {
            aggregateTimeout: 300,
            poll: 1000
        }
    }
}

然後執行

npm install && npm run dev

如果你是用的 Homestead, 可能需要 root 許可權和 --no-bin-links 安裝 npm
這個時候開啟 weibo.test:3000 已經可以看到 Nuxt 的預設頁面
Nuxt 預設頁面

3. 修改 Nginx 配置 /etc/nginx/sites-available/weibo.test

# 修改前
location / {
    try_files $uri $uri/ /index.php?$query_string;
}
# 修改後
location /api/ {
    try_files $uri $uri/ /index.php?$query_string;
}
location / {
    proxy_pass http://127.0.0.1:3000;
}

重啟一下 Nginx service restart nginx

4. 現在我們來實現一個 SSR 的頁面

準備一個演示介面

php artisan make:controller PagesController

app/Http/Controllers/PagesController.php

public function index(){
    return response()->json([
        'title' => 'SSR 測試'
    ]);
}

routes/api.php

Route::get('/pages', 'PagesController@index');

安裝 axios 後，新建 client/pages/index.vue

<template>
    <h1>
        {{ title }}
    </h1>
</template>
<script type="text/javascript">
import axios from 'axios';
export default{
    async asyncData () {
        const { data } = await axios.get(`http://weibo.test/api/pages`);
        return { title: data.title }
    }
}
</script>

大功告成
最基礎的 SSR

5. 生產模式

先 npm run prod 再使用 pm2 保持 run

# 全域性安裝 pm2
npm install -g pm2
# 啟動 pm2
pm2 startup
# 開啟一個 pm2 程式
pm2 start npm --name "weibo" -- run start
# 持續 run
pm2 save

每次更新後都要重新啟動 pm2

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章