Amo Wu's Blog

本文介紹如何使用 AWS Lambda & AWS API Gateway 搭建一個不需要伺服器的環境，提供 Slack Slash Commands 查詢豆瓣電影。 2016-01-24 Update： New – Slack Integration Blueprints for AWS Lambda 在 Slack 輸入 /movie 絕地救援，會顯示相關的電影資料。 這篇文章使用到的技術： Slack Slash Commands AWS Lambda AWS API Gateway 豆瓣電影 API 閱讀這篇文章需要具備什麼能力： Node.js 的基本能力 Amazon Web Services 的基本操作 接下來我會逐步講解這些東西： Slack Slash Commands 的運作機制 建立一個簡單的 AWS Lambda function 建立一個簡單的 AWS API Gateway 執行 Lambda function 使用 Lambda 呼叫豆瓣電影 API 測試 AWS API Gateway 將 API Gateway endpoint 加入至 Slack Slash Command Slack Slash Commands 的運作機制 當你在 Slack channel 輸入 /movie 權力的遊戲 ，Slack 會發出一個 content-type Header 設為 application/x-www-form-urlencoded 的 HTTP POST 請求，格式如下： token=YOUR_SLASH_COMMAND_TOKEN team_id=YOUR_TEAM_ID team_domain=YOUR_TEAM_DOMAIN channel_id=YOUR_CHANNEL_ID channel_name=YOUR_CHANNEL_NAME user_id=YOUR_USER_ID user_name=YOUR_USER_NAME command=/movie text=權力的遊戲 response_url=YOUR_HOOK_URL 然後 Slack 需要收到的 JSON 回應格式如下（詳見 Attachments）： { &qu

最近在使用 React 和 Redux 建構一個 Isomorphic JavaScript （Universal）應用。 但是在實作 CSS Modules 的時候，會碰上兩個問題： Server-side 的 Node.js 無法 import *.css 。 如果改成使用 process.env.IS_BROWSER 來判斷只在 Client-dide import，那又會碰到 Server-side 與 Client-side render 出來的 DOM 結果不一致的問題。 解決方式： 安裝 css-modules-require-hook 這個套件： npm install css-modules-require-hook --save-dev 修改 webpack config 的 css-loader 設定： // webpack.config.js { // ... module: { loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!!postcss-loader' }] } // ... } 在 Node.js 的 main file 加入 css-modules-require-hook： // server.js require('css-modules-require-hook')({ generateScopedName: '[name]__[local]___[hash:base64:5]' }); // ... 注意 generateScopedName 的命名格式，必須與 css-loader 的 localIdentName 保持一致。

最近 Bower 宣布停止維護，所以許多前端的 packages 都移到了 NPM 上，甚至連 Grunt 和 Gulp 這類 build tools 都有要被 NPM scripts 取代的趨勢。 這篇文章主要是紀錄怎麼在發布自己的 package 之前，打包好需要的檔案。 假設你會使用 Grunt 或 Gulp 將所有原始碼打包存成一支檔案，例如 dist/build.js ，但是因為通常我們不會把 dist 這類輸出文件放進版本控制，所以要在每次發布新版本的時候動態打包。 方法是在 package.json 的 script 底下新增一個 prepublish 的腳本，然後把你的打包命令寫在這裡： // package.json { "script": { "prepublish": "..." // grunt or gulp } } 接下來是透過 main 指定程式的進入位置，讓其他人在使用的時候可以正常的 require 或 import 你的 package。 預設的檔案通常是 index.js ，這裡我們把它改成剛剛打包完成的 dist/buid.js ： // package.json { "main": "dist/build.js" } 最後也是最重要的部分，記得在專案根目錄新增一份 .npmignore 的空檔案，因為如果沒有它，NPM 在發布的時候會參考 .gitignore 的清單來決定哪些檔案不能被發布，而通常 dist 就會在這裡面，所以要將它從 .npmignore 裡面移除。 都準備完成之後就可以發布了，如果你還沒有 NPM 的帳號，可以註冊一個： npm adduser 然後發布新版本： npm publish 記得更新 package.json 的 version 才能發布 發布成功之後前往 http://npmjs.com/package/name 看結果： 完整專案可以參考我的 GitHub 參考文章 Publishing npm packages