Laravel swagger
更新於 2024/11/08閱讀時間約 5 分鐘
我對於自己開發的API會習慣性寫一份swagger文件方便前端串接，但因為這些文件都是存在我個人的swagger帳號，且會受限於免費版限制，再加上剛好跟PM在討論如何維護我們的文件，於是我就開始著手將swagger自己部署到公司管理後台。
這樣做的好處：
(1)後端都可以編輯
(2)文件隸屬於公司底下且不用另外付費
(3)git版控，可以清楚知道誰動了什麼
實作
安裝
npm install swagger-ui
設定
step1: 存放yaml檔
因為這份swagger是要開放給外界看到的，所以會需要將檔案放在public資料夾，因為公司有多個產品，所以我開的路徑為：public/documents/aaa-api.yaml, public/documents/bbb-api.yaml
step2: js檔設定檔
在resource/js資料夾中新增每一份yaml檔要用的js設定：
aaa-swager.yaml
import SwaggerUI from "swagger-ui";
import "swagger-ui/dist/swagger-ui.css";
SwaggerUI({
dom_id: "#swagger-api", // 代表他會去找html中元素id是swagger-api的，然後將文件載入
url: "https://xxxxxx/documents/aaa-api.yaml", // yaml檔位置，js會去抓
});
bbb-swagger.yaml
import SwaggerUI from "swagger-ui";
import "swagger-ui/dist/swagger-ui.css";
SwaggerUI({
dom_id: "#swagger-api", // 代表他會去找html中元素id是swagger-api的，然後將文件載入
url: "https://xxxxxx/documents/bbb-api.yaml", // yaml檔位置，js會去抓
});
step3: webpack
設定
到webpack.mix.js檔，新增以下
mix.js("resources/js/aaa-swagger.js", "public/js")
.js("resources/js/bbb-swagger.js", "public/js")
運行
npm run dev將在resource/js資料夾的js打包到public/js資料夾裡，這樣我們的html檔就能載入他們，背後js會幫我們根據設定檔把畫面載入到某一個div上。
step4: 寫blade樣板
新增swagger.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>api</title>
</head>
<body>
<div id="swagger-api"></div>
<script src="{{ mix('js/' . $fileName) }}"></script>
</body>
</html>
因為每一份api文件樣式都一樣，所以我才只開一份blade，需要載入的檔案位置再透過api route傳就好。
step5: route
到web.php新增以下路由：
Route::group([
'prefix' => 'documents',
'middleware' => ['auth:sanctum'] // 登入驗證,避免api公開
], function(){
Route::get('/aaa', function () {
return view('swagger')->with('fileName', 'aaa-swagger.js');
}); Route::get('/bbb', function () {
return view('swagger')->with('fileName', 'bbb-swagger.js');
});});
step6:開cors
step7: 運行
composer artisan optimize之後到你設定好的路由，就可以看到成果了
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
Simple Storage Service (S3) 是 AWS 最常應用到的服務，只要是需要將檔案上傳到雲端的狀況都可以使用S3，本篇文章將介紹如何設定與使用AWS S3。
在使用laravel中的Queue job的時候
如果希望job中斷還可以重新啟動這個時候就會需要用到Supervisor了
本篇文章為您帶來如何使用Supervisor執行Laravel的queue:work的教學
有的時候，會希望在物件導向中對原生的Class新增功能的時候，大多我們都會寫一個新的class並繼承。
但是其實Laravel提供了一個不同的方式，讓我們可以在常用的Class上，直接新增想要的function，那就是macro。
Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性，並輕鬆地進行結構變更
待業中後，發現時間變很多就開始東看看西看看，思考著要如何更深入理解Laravel框架的運用，而在Laravel框架中哪些部分是框架替我們做了哪些處理，推薦一個影片給大家一起學習理解。
紀錄一下Laravel好用的validator。
E
本筆記參考:
1. https://stackoverflow.com/questions/31539727/laravel-password-validation-rule
假如開發了一個部落格，以下是ERD設計:
接著從程式碼來看如何join:
$this->article
->join('comments', 'article.article_id', '=', 'comments.article_id')
->select('article.article_i
在開發過程中，難免會需要自己寫一些common function，例如Laravel 如何寫 Log這篇提到的，write log為了能夠顯示file name跟line，可以把它封裝成一個common function，以後要改log format也只需要從這邊改...
Laravel的日誌系統底層是Monolog，設定在config\logging.php裡面，預設路徑是在storage\logs\laravel.log，也可以更改成喜歡的路徑。
...
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
Simple Storage Service (S3) 是 AWS 最常應用到的服務，只要是需要將檔案上傳到雲端的狀況都可以使用S3，本篇文章將介紹如何設定與使用AWS S3。
在使用laravel中的Queue job的時候
如果希望job中斷還可以重新啟動這個時候就會需要用到Supervisor了
本篇文章為您帶來如何使用Supervisor執行Laravel的queue:work的教學
有的時候，會希望在物件導向中對原生的Class新增功能的時候，大多我們都會寫一個新的class並繼承。
但是其實Laravel提供了一個不同的方式，讓我們可以在常用的Class上，直接新增想要的function，那就是macro。
Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性，並輕鬆地進行結構變更
待業中後，發現時間變很多就開始東看看西看看，思考著要如何更深入理解Laravel框架的運用，而在Laravel框架中哪些部分是框架替我們做了哪些處理，推薦一個影片給大家一起學習理解。
紀錄一下Laravel好用的validator。
E
本筆記參考:
1. https://stackoverflow.com/questions/31539727/laravel-password-validation-rule
假如開發了一個部落格，以下是ERD設計:
接著從程式碼來看如何join:
$this->article
->join('comments', 'article.article_id', '=', 'comments.article_id')
->select('article.article_i
在開發過程中，難免會需要自己寫一些common function，例如Laravel 如何寫 Log這篇提到的，write log為了能夠顯示file name跟line，可以把它封裝成一個common function，以後要改log format也只需要從這邊改...
Laravel的日誌系統底層是Monolog，設定在config\logging.php裡面，預設路徑是在storage\logs\laravel.log，也可以更改成喜歡的路徑。
...