發表文章

透來 Docker 來封裝 Angular 6+ 筆記

圖片
  透來 Docker 來封裝 Angular 6+ 筆記 前陣子要來 用jenkins deploy Angular 的Project ,發現了幾個問題 還要安裝Angular CLI ng build  很吃資源,Azure Standard B2s (2 vcpus, 4 GiB memory) 整台都會hang住 所以決定不偷懶了,直接把build的寫在Docker裡, 基本準備 這部分需要先累績一些基本技術,以下是網路的慘考文獻 Angular 深入淺出三十天 Docker 基本教學 - 從無到有 Docker-Beginners-Guide Dockerfile 先在專案根目錄新增 Dockerfile 檔案,與angular.json同一層 # 第一階段產生dist資料夾 FROM node: 14.15 . 3 -alpine3. 10 as builder # 指定預設/工作資料夾 WORKDIR /usr/app # 只copy package.json檔案 COPY ./package*.json ./ # 安裝dependencies RUN npm install # copy其餘目錄及檔案 COPY ./ ./ COPY src src # 指定建立build output資料夾,--prod為Production Mode RUN npm run build --output-path=./dist/{專案名稱} --prod # pull nginx image FROM nginx: 1.13 . 3 -alpine # 從第一階段的檔案copy COPY --from=builder /usr/app/dist/{專案名稱} /usr/share/nginx/html # 覆蓋image裡的設定檔 COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf 專案名稱 : 要替換angular裡的 project name, 可以查看angular.json 中的 .dockerignore 在專案根目錄新增 .dockerignore 檔案,與angular.json同一層 node_modules di...

Google Drive API V3 與 Angluar 整合 Example

圖片
Google Drive API V3 與 Angluar 整合範例 https://github.com/kirinchen/google-drive-angular/ 大致的功能如下 登入/登出 顯示列表By File Tyoe  read 檔案內容  如何申請Google Drive 開發者金鑰和Oauth 下載專案與專案設定 Run Server 如何申請Google Drive 開發者金鑰和Oauth 最近本人開始騎單車的爬坡,所以開發了一個爬坡小工具,那就會用到Google Map API,這邊先做個預告,順便寫個Gmap小筆記啦 創建API Key 1.先到 Google雲端後台 .  https://console.developers.google.com/apis/dashboard 2.請先選擇一個專案 (如果沒有請按建立)  3.啟用API, 資料庫 > 搜尋 : Google Drive API 啟用 Google Drive API 先到憑證,並建立API KEY      5.再到 Google雲端後台 .  Google Cloud Platform Console  並選則憑證  這邊可以看之前申請的Key,也可以複製金鑰 建立OAuth 2.0 用戶端 ID 建立OAuth 同意畫面填入基本資料即可  選擇建立OAuth 2.0 用戶端 ID  下載專案與專案設定 下載  https://github.com/kirinchen/google-drive-angular.git  或者  git clone https://github.com/kirinchen/google-drive-angular.git cd 到 [root ]] 專案下/ run  npm install 修改 [root]/src/environments/environment.ts export const environment = { production : false , clientId : '{OAuth 2.0 用戶端 ID}' , apiKey...

Java lombok 好用annotation小筆記

Java lombok 好用annotation小筆記 建構子設定 @AllArgsConstructor ( access = AccessLevel . PUBLIC ) AccessLevel --> 用來設定建構子的可視的等級 public private … EX @Data @AllArgsConstructor ( access = AccessLevel . PUBLIC ) public class RegisteredFlow { private int flow ; private List < RunInfo > runInfos ; @Data @AllArgsConstructor ( access = AccessLevel . PUBLIC ) public static class RunInfo { private String runUid ; private State state ; private String endTag ; private String endLinkUid ; } public static void main ( String [ ] args ) { List < RunInfo > l = new List < RunInfo > ( ) ; RegisteredFlow rf = new RegisteredFlow ( 123 , l ) ; } } 如果還要包含 空建構子, 可以再加入  @NoArgsConstructor @Data @AllArgsConstructor ( access = AccessLevel . PUBLIC ) @NoArgsConstructor public class RegisteredFlow { builder pattern 關鍵字 :   @Builder  範例: @Data @Builder public class Bundle ...