aszx87410 / mentorship-program

It's the repo for latest updates about mentorship program

17 stars 2 forks source link

[Week1] Murphy #21

Open MurphyJUAN opened 5 years ago

MurphyJUAN commented 5 years ago

今天討論了什麼？結論是什麼？

專案主題：以 Type/Code | Strategy, Design, & Development 為範本，建立兼具前後端的「清大實驗教育學程官網」。目前已經上線了，可以點擊 NthuSDM。網站的功能會有： a. 各個學程的 link ，並導引到各自的展示頁面。 b. 關於網站的介紹 c. 呈現學生的自我介紹與作品 d. 專欄文章區 e. 編輯、新增、刪除等管理專欄文章的後台（詳細需求還需要確認，確認後先想清楚資料結構） f. 優化 SEO g. 自動 CI/CD 流程 h. 架一些 Test (jenkins, eslint, unitest....)
關於文章 a. 報名鐵人賽的自我挑戰組 b. 參加鐵人賽的目的是為了「養成寫文章的習慣」、「記錄開發過程」、「觀察自己」、「練習寫作」 c. 文章內容主要會是記錄我建立上面這個專案遇到的問題，有點像是實驗日誌 d. 30天每天都po文，但可能是從存貨中潑，也許不會每天都寫文章（儘量啦）

最新的進度是什麼？

專案上線了，然後開始看影片學習 express + MongoDB，還不知道實作會發生什麼問題。

下次報告前要完成哪些事項？

關於專案.....

完成每個學程自己的page
完成每個學生自己的page
把換頁的問題處理好（Huli : 用 Global 變數存取狀態）
現有畫面的RWD

關於文章..... 下面是我這幾天遇到的問題，想要紀錄

如何把 vue.js 部署到 GAE 上，並使用從 goDaddy買的網域？
npm run build npm run dev 到底是什麼？為什麼只需要 npm run build 後，把 dist 和 app.yaml 丟到 gae 上網站就可以跑出來了？dist是怎麼產生的？
如何解決換頁問題？

其他心得

寫文章可以是一件很個人的事情，一開始不要想太多，就把寫文章的目標放在幫助自己成長和回顧就可以了，不要給自己太多壓力。

aszx87410 commented 5 years ago

關於文章的部分我之前有寫過兩篇文章，有空的時候可以參考看看：

然後你這專案的規模比我想的更大一點，因為還要做 CI/CD 跟測試之類的，不過我覺得是好事，代表是個很完整的專案。

aszx87410 commented 5 years ago

感覺動態跟靜態網頁你可能沒有分得很清楚

動態指的是 PHP、Node.js 之類的當作 Server 所產生出來的網頁，內容是在 Server 那邊產生，例如說同一個網址：https://example.com/dynamic ，回傳的結果會不一樣。

靜態指的就是一般的檔案，https://example.com/static.js ，內容都是一樣的（不過 Server 端如果更新檔案，當然就會拿到不一樣的）。

你 build 出來的那些 dist 就是靜態檔案，就是你寫好的程式，因為是靜態檔案，所以只需要一個可以 host 這些檔案的伺服器就好，其實連 GAE 都不需要用到，你用 GitHub pages 其實就可以了，或者是 netlify，都可以幫你 host 這些靜態檔案。GAE 通常是給動態用的

然後 npm 的用法你有點搞錯，猜測應該是對 Node.js 不熟，一般來說用了 npm 之後如果要引入檔案，直接用 import xxx 就好了。那瀏覽器怎麼辦呢？瀏覽器以前沒有支援 import xxx 這種語法，所以 webpack 就出現了，用 webpack 來做這件事。所以通常也不會有「如果要使用的話，就到 html 裡面的script src= 設為node_module/xxx/xxx...就可以了。」這種用法，而是會用 webpack。

零基礎的小明要如何成為前端工程師？這篇可以參考一下

MurphyJUAN commented 5 years ago

感覺動態跟靜態網頁你可能沒有分得很清楚

動態指的是 PHP、Node.js 之類的當作 Server 所產生出來的網頁，內容是在 Server 那邊產生，例如說同一個網址：https://example.com/dynamic ，回傳的結果會不一樣。

靜態指的就是一般的檔案，https://example.com/static.js ，內容都是一樣的（不過 Server 端如果更新檔案，當然就會拿到不一樣的）。

你 build 出來的那些 dist 就是靜態檔案，就是你寫好的程式，因為是靜態檔案，所以只需要一個可以 host 這些檔案的伺服器就好，其實連 GAE 都不需要用到，你用 GitHub pages 其實就可以了，或者是 netlify，都可以幫你 host 這些靜態檔案。GAE 通常是給動態用的

然後 npm 的用法你有點搞錯，猜測應該是對 Node.js 不熟，一般來說用了 npm 之後如果要引入檔案，直接用 import xxx 就好了。那瀏覽器怎麼辦呢？瀏覽器以前沒有支援 import xxx 這種語法，所以 webpack 就出現了，用 webpack 來做這件事。所以通常也不會有「如果要使用的話，就到 html 裡面的script src= 設為node_module/xxx/xxx...就可以了。」這種用法，而是會用 webpack。

零基礎的小明要如何成為前端工程師？這篇可以參考一下

ps. 抱歉 >< 我不確定可不可以把文章傳在這裡，所以後來就刪掉了，我再放上來，之後丟到 IT 鐵人賽之前也先放上來好了。

了解～我當初選 GAE 還有一個考量就是之後會有後端，會建立讓 user 新增、編輯文章的後台，我在把這個考慮補進去，但是現在的確只有 vue.js 。

Oh! 我原本在那裡只想說 npm install 幫我們做了什麼事，在install webpack之前，我們還是可以用這種 src='xxx'的方式來 include lib ？只是應該沒有什麼人會這樣用，我自己就沒有用過，像是這樣：

<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equic='X-UA-Compatible' content='ie=edge'>
    <title>hehe</title>
</head>

<body>
    <script src='node_modules/jQuery/tmp/jquery.js' charset='UTF-8'></script>
    <script type='text/javascript'>
        jQuery(document).ready(function () {
            jQuery('body').append('<h1>sdsd</h1>')
        })
    </script>
</body>

</html>

然後之後下一篇再去講 webpack ，但是原來src=''這種方式是有缺點的，在 webpack 的 import 之前還有一個 browserify 幫我們引入lib

🤣平常寫就寫，都沒有發現原來好多東西出現都有他演進的原因～

謝謝提供參考資料！！！

aszx87410 commented 5 years ago

首先第一個問題是不會有人把 node_modules 傳上去，第二個問題是儘管傳上去了，也不一定能直接用 src 的方式引入。因為模組化其實有分很多種規範，什麼 AMDjs、CommonJS 之類的，所以不一定能用

MurphyJUAN commented 5 years ago

首先第一個問題是不會有人把 node_modules 傳上去，第二個問題是儘管傳上去了，也不一定能直接用 src 的方式引入。因為模組化其實有分很多種規範，什麼 AMDjs、CommonJS 之類的，所以不一定能用

我越查資料越不太懂 ><
不管是 browserify 的 require 或是 webpack 的 import，他們跟直接 src='' 的差別是什麼？他們難道不也是去 node_modules 裡面找東西嗎？的確最後上傳的檔案裡面沒有 node_module，所以如果是使用 src='mode_module/xxx' 會找不到東西，但是為什麼 require, import 他們可以呢？

MurphyJUAN commented 5 years ago

到部署網站才開始從頭學起

這次我決定把一個 vue 出來的一個靜態網頁部署到 GCP(Google Cloud Platform)上面，主要是因為這個網站可能只會營運一年，之後還會加入後端，(如果純粹只有前端的話也不需要使用 GAE 了），而GCP有提供一年免費以及300美金的試用金，再加上之前實習的兩家公司也都使用GCP的服務，感覺比較親切，就選擇這個平台了。

關於 GAE 還是 GCE 的選擇，其實已經有很多文章在分析，簡單來說，GCE 的彈性很大，可以讓使用者自己設定需要的 CPU 和 RAM 等等的條件，而 GAE 已經幫你建置好平台和環境，你只需要上傳自己寫的應用程序就好，不需要管設定和維護，那對於我這個新手而言是再友善不過的選項了，所以果斷選擇。

如何啟用 GAE ?

1. 在 GCP 的左側選單中，選擇「 App Engine」

2. 點擊「建立應用程式」

3. 選擇區域

我選擇 「 asia-east2」位在香港，離台灣最近的點。

4. 選擇程式語言

如何部署自己的 Vue.js 專案？

5. 回到自己的專案，建立 app.yaml 檔案，直接貼上

runtime: nodejs10
handlers:
  # Serve all static files with urls ending with a file extension
  - url: /(.*\..+)$
    static_files: dist/\1
    upload: dist/(.*\..+)$
    # catch all handler to index.html
  - url: /.*
    static_files: dist/index.html
    upload: dist/index.html

6. 在自己的專案目錄中，輸入 `npm run build`

這時候會發現自己的目錄結構中，多出一個資料夾 `dist`

7. 回到 GCP ，點擊左側目錄中 `Storage` 的`瀏覽器`

8. 點擊剛剛自己建立的 App Engine

ex: staging.xxxxxx.com

9. 上傳 `app.yaml` 以及 `dist` 資料夾

10. 點擊右上方的 `啟用 Cloud Shell`

這時候可以先輸入 `ls` 觀察在現有的目錄有什麼東西呢？應該只會發現一份`Readme-shell.txt`。

11. `mkdir …-app`

在根目錄建立一個資料夾，可以叫做 xxx-app

12. `gsutil rsync -r gs://${值區的名字} ./xxx-app`

所以到底什麼是值區呢？
「值區」是在 Cloud Storage 中保存資料的基本容器。
我們剛剛就是把 code 上傳到 Cloud Storage 的其中一個值區。

至於這個指令中的 gsutil 他是一種 Python 應用程式，可讓您透過指令列存取 Cloud Storage，也可讓您執行多種值區與物件管理工作，包括：

建立及刪除值區。
上傳、下載及刪除物件。
列出值區和物件。
移動、複製及重新命名物件。
編輯物件和值區 ACL。

詳細使用 gsutil 的方式可以參考這篇教學，我這邊只說明上面那條指令。 https://cloud.google.com/storage/docs/quickstart-gsutil?hl=zh-tw gsutil rsync gs://[BUCKET] [MOUNT_DIRECTORY] BUCKET 在這裡就是 ${值區的名字} 也就是我們剛剛上傳檔案的地方，MOUNT_DIRECTORY 就是我們的 xxx-app 資料夾，我們希望可以把檔案複製到這個Cloud Filestore 檔案共用區。

13. `cd xxx-app`

進入剛剛新增的資料夾

14. `gcloud app deploy`

這樣就部署完成囉！

不對呀！那剛剛突然冒出來的 `dist`資料夾是...??

為什麼只需要上傳這個 dist 檔案就好？而不需要上傳整份專案呢？

那就要從常常聽、常常用，但總是不想去搞動的 Webpack 開始談了！下次再說吧！

MurphyJUAN commented 5 years ago

npm, webpack, gulp … 寫個網頁幹嘛那麼複雜啦 QQ

npm 到底是什麼？

無論是寫 react 還是 vue，在最開始我們都會需要一個指令 npm install 如果需要安裝套件，也使用 npm install xxx --save 但是！！npm 到底是什麼？！

以前想要用 jQuery ，都是去它的官網下載 Source 塞到專案裡面的 lib，然後再去 html include 它。但是這樣手動很麻煩呀！所以 npm 就出現了！

nom ( Node Package Manager) 就是一個線上套件庫，可以下載各種Javascript的套件來使用。

npm 要怎麼用？（請先安裝好 npm）

1. 在專案中`npm init`

過程中會詢問：

name: 就是該專案的名字，它預設就是該目錄名。
description: 專案描述。
entry point: 專案切入點，這有點複雜，之後再說。(index.js)
test command: 專案測試指令，之後說。
git repository: 專案原始碼的版本控管位置。
keywoard: 專案關鍵字
author: 專案作者，以author-name author@email.com寫之。
license: 專案版權。沒問題的話就按enter，之後會產生 package.json 裡面記錄專案的資訊。

2. 試裝 jQuery 看看會發生什麼神奇的事？

輸入 npm install jQuery —save ，npm 會在他的線上函式庫搜尋有沒有人上傳這個套件，找到之後就會自動抓下來，這時候回到 package.json會發現多出了：

"dependencies": {
    "jQuery": "^1.7.4"
  }

以及一個新資料夾 node_module 裡面就有我們想要的 jQuery。

3. 為什麼要多出一個 node_module 資料夾？

Npm 會在每個專案中安裝他們需要的套件，跟pip不一樣，python套件通常會安裝在 usr/local/bin ，這樣不同專案都可以使用這些套件。 Npm 這樣的做法比較耗資源，但也因為每個專案都次隔離的環境，較不會互相影響。

所以就是這樣，用npm安裝的套件，都會在package.json的dependency裡面註記安裝了甚麼以及版本，然後套件的source code會被塞到node_module裡面管理。如果要使用的話，就到 html 裡面的script src= 設為node_module/xxx/xxx...就可以了。

<這邊再去補 Browserify 的 require 和 webpack 的 import 我還沒有搞懂 >< >

.gitignore 和為什麼package.json 需要去記錄裝了什麼套件？

最後要上傳到 github的時候，不要忘記新增一個檔案 .gitignore 然後把 node_module 加進去。因為node_module隨著專案逐漸龐大，裡面也會越來越多東西，但我們只需要把 package.json上傳，別人看到dependency裡面記錄的資訊，再npm install 就可以自動在本機安裝那些專案需要的套件了，而不需要把那一大包node_module隨身帶著走呦><！

參考資料：從零開始: 使用NPM套件 - 進擊的 Front End‘s - Medium

MurphyJUAN commented 5 years ago

求職條件要求：熟悉 Webpack 模組化開發/構建流程

相信每個找過前端工程師的人都相當熟悉這句話了......，隨著工具和需求越來越多和複雜，現在的前端生態早就不是單純了解 html, css, javascript就可以任你行了......

不過不管時代怎麼變化，瀏覽器始終都還是只看得懂、聽得懂最基本的 html, css, javascript 語法，所以當我們使用那些五花八門的Preprocessor，像是scss, react, vue.... 瀏覽器哪看得懂像是 v-if, v-for 這些框架語言啦！這時候就需要 webpack 幫我們翻譯成瀏覽器看得懂的內容，然後上傳到server。

如何安裝 webpack ?

可以直接輸入下面的指令來安裝： npm install webpack webpack-cli —save-dev ( 想當初剛開始寫網頁的時候，我以為輸入過這行指令就叫懂 webpack 了，直到後來去實習遇到很多 npm run watch, gulp ...的問題，才發現原來水這麼深，自己根本什麼都不懂嘛 >< ) —save-dev 代表我們是在開發環境下使用這個package。這時候會發現 package.json 多出：

"devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }

咦？ devDependencies 和 Dependencies 有什麼差別嗎？

Dependencies 裡面記錄的是生產環境中所需要的所有套件；devDependencies 記錄的是本地開發環境中所需要的套件。？？什麼意思？？先介紹 nom install 的三種不同姿態：

npm install 這個方法只會把 source code 抓到 node_module 裡面，但是不會在package.json中記錄。這個方法並不好，因為別人不知道你到底安裝了什麼東西，要報錯了才會知道。奇摩子不好。
npm install –save 這個方法會在 package.json 的 dependencies 中記錄。
npm install –save-dev 這個方法會在 package.json 的 devDependencies 中記錄。

那 2和3我到底要選哪個呢？如果我全部都選2的話，到時候前端會變得臃腫不堪，全部都選3的話，會導致最後 run project 根本不知道 dependencies，所以最好的方法是都用！

舉例來說：dependencies裡面只放那些，我們 product 我需要的套件，例如 vue, vue-router, express, jQuery 這些沒有專案整個就run不起來了呀；但是像是 webpack, gulp, unitest 這些只有在開發階段會需要他們打包或是測試，真正上線的時候並不需要使用，就把他們寫到 devDependencies。

等等，還多了一個 package-lock.json是怎麼回事？

我們再回過頭看 dependencies:

"dependencies": {
    "jQuery": "^1.7.4"
  },

這邊的 ‘^’指的是「向後（新）兼容依賴」，只要 jQuery 的版本大於 1.7.4就可以安裝，所以在不同時空背景下，npm install 可能會安裝到 1.7.5 或 1.7.6 之類的不同版本，而且如果我們安裝的套件自己本身也有依賴的套件，那這邊不會記錄我們要怎麼知道呀？

這時候 package-lock.json 就出現來解決這個問題。

“@webassemblyjs/ast”: {
      “version”: “1.8.5”,
      “resolved”: “https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz”,
      “integrity”: “sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==“,
      “dev”: true,
      “requires”: {
        “@webassemblyjs/helper-module-context”: “1.8.5”,
        “@webassemblyjs/helper-wasm-bytecode”: “1.8.5”,
        “@webassemblyjs/wast-parser”: “1.8.5”
      }

你會發現，在package-lock.json裡面詳細的紀錄到底是哪個版本，以及來源，以及這個套件本身又需要哪些工具，所以到時候npm install 的時候就可以準確的安裝相對應的版本與工具。

aszx87410 / mentorship-program

[Week1] Murphy #21

今天討論了什麼？結論是什麼？

最新的進度是什麼？

下次報告前要完成哪些事項？

其他心得

ps. 抱歉 >< 我不確定可不可以把文章傳在這裡，所以後來就刪掉了，我再放上來，之後丟到 IT 鐵人賽之前也先放上來好了。

到部署網站才開始從頭學起

如何啟用 GAE ?

1. 在 GCP 的左側選單中，選擇 「 App Engine」

2. 點擊 「建立應用程式」

3. 選擇區域

4. 選擇程式語言

如何部署自己的 Vue.js 專案？

5. 回到自己的專案，建立 app.yaml 檔案，直接貼上

6. 在自己的專案目錄中，輸入 npm run build

7. 回到 GCP ，點擊左側目錄中 Storage 的瀏覽器

8. 點擊剛剛自己建立的 App Engine

9. 上傳 app.yaml 以及 dist 資料夾

10. 點擊右上方的 啟用 Cloud Shell

11. mkdir …-app

12. gsutil rsync -r gs://${值區的名字} ./xxx-app

13. cd xxx-app

14. gcloud app deploy

不對呀！那剛剛突然冒出來的 dist資料夾是...??

npm, webpack, gulp … 寫個網頁幹嘛那麼複雜啦 QQ

npm 到底是什麼？

npm 要怎麼用？（請先安裝好 npm）

1. 在專案中npm init

2. 試裝 jQuery 看看會發生什麼神奇的事？

3. 為什麼要多出一個 node_module 資料夾？

.gitignore 和 為什麼package.json 需要去記錄裝了什麼套件？

參考資料：從零開始: 使用NPM套件 - 進擊的 Front End‘s - Medium

求職條件要求：熟悉 Webpack 模組化開發/構建流程

如何安裝 webpack ?

咦？ devDependencies 和 Dependencies 有什麼差別嗎？

等等，還多了一個 package-lock.json是怎麼回事？

1. 在 GCP 的左側選單中，選擇「 App Engine」

2. 點擊「建立應用程式」

6. 在自己的專案目錄中，輸入 `npm run build`

7. 回到 GCP ，點擊左側目錄中 `Storage` 的`瀏覽器`

9. 上傳 `app.yaml` 以及 `dist` 資料夾

10. 點擊右上方的 `啟用 Cloud Shell`

11. `mkdir …-app`

12. `gsutil rsync -r gs://${值區的名字} ./xxx-app`

13. `cd xxx-app`

14. `gcloud app deploy`

不對呀！那剛剛突然冒出來的 `dist`資料夾是...??

1. 在專案中`npm init`

.gitignore 和為什麼package.json 需要去記錄裝了什麼套件？