{"id":39604,"date":"2023-03-11T23:14:45","date_gmt":"2023-12-05T08:04:32","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/"},"modified":"2024-04-29T18:29:19","modified_gmt":"2024-04-29T10:29:19","slug":"%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/","title":{"rendered":"\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u662f2019\u5e74Angular #2\u5f69\u8679\u65e5\u5386\u7684\u7b2c20\u5929\u6587\u7ae0\u3002<\/p>\n

\u4f60\u597d\u3002\u6211\u662f @seapolis\u3002\u6211\u5728\u7b2c\u4e00\u6b21\u7684\u5723\u8bde\u65e5\u5386\u4e2d\u611f\u5230\u975e\u5e38\u7d27\u5f20\u3002<\/p>\n

\u5c3d\u7ba1\u5723\u8bde\u8282\u53ea\u5269\u4e0b\u51e0\u5929\u4e86\uff0c\u4f46\u6211\u8ba4\u4e3a\u4ecd\u7136\u6709\u8bb8\u591a\u4eba\u5c1a\u672a\u786e\u5b9a\u5728\u5723\u8bde\u6d3e\u5bf9\u4e0a\u4ea4\u6362\u793c\u7269\u3002
\n\u56e0\u6b64\uff0c\u4eca\u5929\u6211\u60f3\u4ecb\u7ecd\u4e00\u4e2a\u7edd\u5bf9\u80fd\u53d7\u5230\u6b22\u8fce\u7684\u5723\u8bde\u793c\u7269\uff0c\u90a3\u5c31\u662fAngular Universal\u5e94\u7528\u7684\u914d\u65b9\u3002<\/p>\n

Angular Universal\u662f\u4ec0\u4e48\uff1f<\/h1>\n

\u6211\u60f3\u5f88\u591a\u4eba\u53ef\u80fd\u4e0d\u592a\u4e86\u89e3Angular Universal\uff0c\u6240\u4ee5\u6211\u60f3\u5728\u8fd9\u91cc\u505a\u4e00\u70b9\u7b80\u5355\u7684\u4ecb\u7ecd\u3002<\/p>\n

Angular Universal\u548cNuxt.js\u53ef\u4ee5\u8bf4\u662fAngular\u7248\u672c\u548cVue.js\u7248\u672c\u7684\u76f8\u5e94\u6846\u67b6\u3002
\nNuxt.js\u662f\u4e00\u4e2a\u5c06\u591a\u79cd\u529f\u80fd\u4e0eVue.js\u7ed3\u5408\u5728\u4e00\u8d77\u7684\u6846\u67b6\uff0c\u5176\u4e2d\u5f15\u4eba\u6ce8\u76ee\u7684\u529f\u80fd\u662f\u670d\u52a1\u5668\u7aef\u6e32\u67d3\uff08SSR\uff09\u529f\u80fd\u3002<\/p>\n

\u6b63\u5982\u60a8\u6240\u77e5\uff0cVue.js\u548cAngular\u662f\u7528\u4e8e\u521b\u5efa\u5355\u9875\u5e94\u7528\u7a0b\u5e8f\uff08\u4ee5\u4e0b\u7b80\u79f0SPA\uff09\u7684\u6846\u67b6\u3002\u7136\u800c\uff0c\u4ec5\u4f7f\u7528SPA\u65f6\uff0c\u7531\u4e8e\u5728\u6d4f\u89c8\u5668\u4e2d\u4f7f\u7528JavaScript\u6784\u5efaHTML\u7ed3\u6784\uff0c\u6240\u4ee5\u4f1a\u51fa\u73b0\u52a0\u8f7d\u65f6\u95f4\u957f\u3001\u641c\u7d22\u5f15\u64ce\u4f18\u5316\u8f83\u5dee\u7b49\u7f3a\u70b9\u3002<\/p>\n

\u4e3a\u89e3\u51b3\u8fd9\u4e9b\u95ee\u9898\uff0c\u51fa\u73b0\u4e86SSR\u6280\u672f\u3002\u4e0e\u5728\u6d4f\u89c8\u5668\u7aef\u6784\u5efaHTML\u7ed3\u6784\u4e0d\u540c\uff0cSSR\u901a\u8fc7\u5728\u4e13\u95e8\u642d\u5efa\u7684Node\u670d\u52a1\u5668\u4e0a\u9884\u5148\u6784\u5efaHTML\u7ed3\u6784\uff0c\u7136\u540e\u5c06\u6574\u4e2aHTML\u6587\u4ef6\u8fd4\u56de\u7ed9\u6d4f\u89c8\u5668\u3002\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\uff0c\u80fd\u591f\u4fdd\u6301SPA\u7684\u7528\u6237\u4f53\u9a8c\uff0c\u540c\u65f6\u907f\u514d\u4e0a\u8ff0\u7f3a\u70b9\u3002<\/p>\n

Nuxt.js\u5185\u7f6e\u4e86\u8fd9\u4e00SSR\u529f\u80fd\u4f5c\u4e3a\u5176\u7279\u8272\u3002\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\uff0c\u53ea\u8981\u4fee\u6539\u4e86Vue\u6587\u4ef6\uff0c\u5b83\u5c31\u4f1a\u81ea\u52a8\u91cd\u65b0\u52a0\u8f7d\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u6beb\u65e0\u610f\u8bc6\u5730\u5f00\u53d1\uff0c\u5c31\u50cf\u5f00\u53d1SPA\u4e00\u6837\uff0c\u56e0\u6b64\u975e\u5e38\u53d7\u6b22\u8fce\u3002<\/p>\n

\u53ef\u4ee5\u5c06SSR\u529f\u80fd\u5e94\u7528\u4e8eAngular\u5e94\u7528\u7a0b\u5e8f\u7684\u5e93\u662fAngular Universal\u3002<\/p>\n

\u5982\u4f55\u521b\u5efaAngular Universal\u9879\u76ee\u3002<\/h1>\n

Angular Universal\u63d0\u4f9b\u4e86\u5b98\u65b9\u4e00\u79cd\u7528\u6cd5\uff0c\u4f46\u4ec5\u4ec5\u6267\u884c\u8fd9\u4e2a\u65b9\u5f0f\u5374\u65e0\u6cd5\u4f7f\u7528\u7c7b\u4f3cNuxt.js\u7684\u70ed\u91cd\u8f7d\u529f\u80fd\u3002\u6bcf\u6b21\u4fee\u6539\u6587\u4ef6\u90fd\u9700\u8981\u8fd0\u884cnpm run build:ssr && npm run serve:ssr\uff0c\u5f00\u53d1\u4f53\u9a8c\u975e\u5e38\u7cdf\u7cd5\u3002<\/p>\n

\u56e0\u6b64\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u540d\u4e3a@enten\/angular-universal\u7684\u811a\u624b\u67b6\u6a21\u677f\uff0c\u5176\u4e2d\u5305\u542b\u4e86\u4e3a\u4f7f\u7528Angular Universal\u548c\u70ed\u91cd\u8f7d\u529f\u80fd\u8fdb\u884c\u5404\u79cd\u8bbe\u7f6e\u7684\u9884\u8bbe\u914d\u7f6e\u3002<\/p>\n

\u8bf7\u6309\u7167 README.md \u4e2d\u6240\u5199\u7684\u8fdb\u884c\u64cd\u4f5c\u3002<\/p>\n

$ <\/span>git clone https:\/\/github.com\/enten\/angular-universal\r\n$ <\/span>cd <\/span>angular-universal\r\n$ <\/span>npm install<\/span>\r\n$ <\/span>ng serve\r\n<\/code><\/pre>\n
\u6211\u53ef\u4ee5\u975e\u5e38\u5bb9\u6613\u5730\u542f\u52a8Angular Universal\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
\u6784\u6210<\/h2>\n
\u8ba9\u6211\u4eec\u6765\u67e5\u770bsrc\u6587\u4ef6\u5939\u7684\u5185\u5bb9\u3002<\/p>\n
src\r\n\u251c api          <-- SSR\u7528\u30b5\u30fc\u30d0\u30fc\u306eAPI\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u8a2d\u5b9a\r\n\u251c app\r\n\u251c assets\r\n\u251c environments\r\n\u251c favicon.ico\r\n\u251c index.html\r\n\u251c main.ts\r\n\u251c polyfill.ts\r\n\u251c server.ts    <-- SSR\u7528\u30b5\u30fc\u30d0\u30fc\u306e\u7acb\u3061\u4e0a\u3052\u3092\u884c\u3063\u3066\u3044\u308b\r\n\u251c styles.scss\r\n\u2514 test.ts\r\n<\/code><\/pre>\n
\u6211\u53d1\u73b0\u4e86\u4e00\u4e2a\u5728\u4e4b\u524d\u770b\u8fc7\u7684\u6587\u4ef6\u5939\u91cc\u6dfb\u52a0\u4e86api\u6587\u4ef6\u5939\u548cserver.ts\u6587\u4ef6\u7684\u60c5\u51b5\u3002<\/p>\n
\/\/ These are important and needed before anything else<\/span>\r\nimport<\/span> '<\/span>zone.js\/dist\/zone-node<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> '<\/span>reflect-metadata<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> createServer<\/span> }<\/span> from<\/span> '<\/span>http<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> join<\/span> }<\/span> from<\/span> '<\/span>path<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> enableProdMode<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgSetupOptions<\/span> }<\/span> from<\/span> '<\/span>@nguniversal\/express-engine<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MODULE_MAP<\/span> }<\/span> from<\/span> '<\/span>@nguniversal\/module-map-ngfactory-loader<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> ServerAPIOptions<\/span>,<\/span> createApi<\/span> }<\/span> from<\/span> '<\/span>.\/api<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> environment<\/span> }<\/span> from<\/span> '<\/span>.\/environments\/environment<\/span>'<\/span>;<\/span>\r\n\r\n\r\n\/\/ WARN: don't remove export of AppServerModule.<\/span>\r\n\/\/ Removing export below will break replaceServerBootstrap() transformer<\/span>\r\nexport<\/span> {<\/span> AppServerModule<\/span> }<\/span> from<\/span> '<\/span>.\/app\/app.server.module<\/span>'<\/span>;<\/span>\r\n\r\n\r\n\/\/ Faster server renders w\/ Prod mode.<\/span>\r\n\/\/ Prod mode isn't enabled by default because that breaks debugging tools like Augury.<\/span>\r\nif<\/span> (<\/span>environment<\/span>.<\/span>production<\/span>)<\/span> {<\/span>\r\n  enableProdMode<\/span>();<\/span>\r\n}<\/span>\r\n\r\n\r\nexport<\/span> const<\/span> PORT<\/span> =<\/span> process<\/span>.<\/span>env<\/span>.<\/span>PORT<\/span> ||<\/span> 4000<\/span>;<\/span>\r\nexport<\/span> const<\/span> BROWSER_DIST_PATH<\/span> =<\/span> join<\/span>(<\/span>__dirname<\/span>,<\/span> '<\/span>..<\/span>'<\/span>,<\/span> '<\/span>browser<\/span>'<\/span>);<\/span>\r\n\r\n\r\nexport<\/span> const<\/span> getNgRenderMiddlewareOptions<\/span>:<\/span> ()<\/span> =><\/span> NgSetupOptions<\/span> =<\/span> ()<\/span> =><\/span> ({<\/span>\r\n  bootstrap<\/span>:<\/span> exports<\/span>.<\/span>AppServerModuleNgFactory<\/span>,<\/span>\r\n  providers<\/span>:<\/span> [<\/span>\r\n    \/\/ Import module map for lazy loading<\/span>\r\n    {<\/span>\r\n      provide<\/span>:<\/span> MODULE_MAP<\/span>,<\/span>\r\n      useFactory<\/span>:<\/span> ()<\/span> =><\/span> exports<\/span>.<\/span>LAZY_MODULE_MAP<\/span>,<\/span>\r\n      deps<\/span>:<\/span> [],<\/span>\r\n    },<\/span>\r\n  ],<\/span>\r\n});<\/span>\r\n\r\nexport<\/span> const<\/span> getServerAPIOptions<\/span>:<\/span> ()<\/span> =><\/span> ServerAPIOptions<\/span> =<\/span> ()<\/span> =><\/span> ({<\/span>\r\n  distPath<\/span>:<\/span> BROWSER_DIST_PATH<\/span>,<\/span>\r\n  ngSetup<\/span>:<\/span> getNgRenderMiddlewareOptions<\/span>(),<\/span>\r\n});<\/span>\r\n\r\n\r\nlet<\/span> requestListener<\/span> =<\/span> createApi<\/span>(<\/span>getServerAPIOptions<\/span>());<\/span>\r\n\r\n\/\/ Start up the Node server<\/span>\r\nconst<\/span> server<\/span> =<\/span> createServer<\/span>((<\/span>req<\/span>,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>\r\n  requestListener<\/span>(<\/span>req<\/span>,<\/span> res<\/span>);<\/span>\r\n});<\/span>\r\n\r\nserver<\/span>.<\/span>listen<\/span>(<\/span>PORT<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>`Server listening -- http:\/\/localhost:<\/span>${<\/span>PORT<\/span>}<\/span>`<\/span>);<\/span>\r\n});<\/span>\r\n\r\n\r\n\/\/ HMR on server side<\/span>\r\nif<\/span> (<\/span>module<\/span>.<\/span>hot<\/span>)<\/span> {<\/span>\r\n  const<\/span> hmr<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    try<\/span> {<\/span>\r\n      const<\/span> {<\/span> AppServerModuleNgFactory<\/span> }<\/span> =<\/span> require<\/span>(<\/span>'<\/span>.\/app\/app.server.module.ngfactory<\/span>'<\/span>);<\/span>\r\n      exports<\/span>.<\/span>AppServerModuleNgFactory<\/span> =<\/span> AppServerModuleNgFactory<\/span>;<\/span>\r\n    }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>warn<\/span>(<\/span>`[HMR] Cannot update export of AppServerModuleNgFactory. <\/span>${<\/span>err<\/span>.<\/span>stack<\/span> ||<\/span> err<\/span>.<\/span>message<\/span>}<\/span>`<\/span>);<\/span>\r\n    }<\/span>\r\n\r\n    try<\/span> {<\/span>\r\n      requestListener<\/span> =<\/span> require<\/span>(<\/span>'<\/span>.\/api<\/span>'<\/span>).<\/span>createApi<\/span>(<\/span>getServerAPIOptions<\/span>());<\/span>\r\n    }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>warn<\/span>(<\/span>`[HMR] Cannot update server api. <\/span>${<\/span>err<\/span>.<\/span>stack<\/span> ||<\/span> err<\/span>.<\/span>message<\/span>}<\/span>`<\/span>);<\/span>\r\n    }<\/span>\r\n  };<\/span>\r\n\r\n  module<\/span>.<\/span>hot<\/span>.<\/span>accept<\/span>(<\/span>'<\/span>.\/api<\/span>'<\/span>,<\/span> hmr<\/span>);<\/span>\r\n  module<\/span>.<\/span>hot<\/span>.<\/span>accept<\/span>(<\/span>'<\/span>.\/app\/app.server.module<\/span>'<\/span>,<\/span> hmr<\/span>);<\/span>\r\n  module<\/span>.<\/span>hot<\/span>.<\/span>accept<\/span>(<\/span>'<\/span>.\/app\/app.server.module.ngfactory<\/span>'<\/span>,<\/span> hmr<\/span>);<\/span>\r\n}<\/span>\r\n\r\n\r\nexport<\/span> default<\/span> server<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u5728server.ts\u6587\u4ef6\u4e2d\uff0c\u6211\u4eec\u542f\u52a8\u4e86SSR\u670d\u52a1\u5668\u3002\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u5b83\u57284000\u7aef\u53e3\u4e0a\u76d1\u542c\u3002
\n\u5b83\u7684\u4e3b\u8981\u4f5c\u7528\u662f\u6839\u636eURL\u8fd4\u56de\u7531app.server.module.ts\u52a0\u8f7d\u7684\u5404\u79cd\u6a21\u5757\u548c\u7ec4\u4ef6\u7684\u6784\u5efa\u7ed3\u679c\u3002\u7531\u4e8e\u5b83\u662f\u57fa\u4e8eexpress.js\u7684\uff0c\u6240\u4ee5\u53ef\u4ee5\u901a\u8fc7\u81ea\u5b9a\u4e49\u6765\u5c06\u5176\u7528\u4f5cBFF\u5c42\u3002<\/p>\n
import<\/span> {<\/span> NgSetupOptions<\/span>,<\/span> ngExpressEngine<\/span> }<\/span> from<\/span> '<\/span>@nguniversal\/express-engine<\/span>'<\/span>;<\/span>\r\nimport<\/span> *<\/span> as<\/span> express<\/span> from<\/span> '<\/span>express<\/span>'<\/span>;<\/span>\r\n\r\n\r\nexport<\/span> interface<\/span> ServerAPIOptions<\/span> {<\/span>\r\n  distPath<\/span>:<\/span> string<\/span>;<\/span>\r\n  ngSetup<\/span>?:<\/span> NgSetupOptions<\/span>;<\/span>\r\n}<\/span>\r\n\r\n\r\nexport<\/span> function<\/span> createApi<\/span>(<\/span>options<\/span>:<\/span> ServerAPIOptions<\/span>)<\/span> {<\/span>\r\n  const<\/span> router<\/span> =<\/span> express<\/span>();<\/span>\r\n\r\n  router<\/span>.<\/span>use<\/span>(<\/span>createNgRenderMiddleware<\/span>(<\/span>options<\/span>.<\/span>distPath<\/span>,<\/span> options<\/span>.<\/span>ngSetup<\/span>));<\/span>\r\n\r\n  return<\/span> router<\/span>;<\/span>\r\n}<\/span>\r\n\r\n\r\nexport<\/span> function<\/span> createNgRenderMiddleware<\/span>(<\/span>distPath<\/span>:<\/span> string<\/span>,<\/span> ngSetup<\/span>:<\/span> NgSetupOptions<\/span>)<\/span> {<\/span>\r\n  const<\/span> router<\/span> =<\/span> express<\/span>();<\/span>\r\n\r\n  router<\/span>.<\/span>set<\/span>(<\/span>'<\/span>view engine<\/span>'<\/span>,<\/span> '<\/span>html<\/span>'<\/span>);<\/span>\r\n  router<\/span>.<\/span>set<\/span>(<\/span>'<\/span>views<\/span>'<\/span>,<\/span> distPath<\/span>);<\/span>\r\n\r\n  \/\/ Server static files from distPath<\/span>\r\n  router<\/span>.<\/span>get<\/span>(<\/span>'<\/span>*.*<\/span>'<\/span>,<\/span> express<\/span>.<\/span>static<\/span>(<\/span>distPath<\/span>));<\/span>\r\n\r\n  \/\/ Angular Express Engine<\/span>\r\n  router<\/span>.<\/span>engine<\/span>(<\/span>'<\/span>html<\/span>'<\/span>,<\/span> ngExpressEngine<\/span>(<\/span>ngSetup<\/span>));<\/span>\r\n\r\n  \/\/ All regular routes use the Universal engine<\/span>\r\n  router<\/span>.<\/span>get<\/span>(<\/span>'<\/span>*<\/span>'<\/span>,<\/span> (<\/span>req<\/span>,<\/span> res<\/span>)<\/span> =><\/span> res<\/span>.<\/span>render<\/span>(<\/span>'<\/span>index<\/span>'<\/span>,<\/span> {<\/span> req<\/span>,<\/span> res<\/span> }));<\/span>\r\n\r\n  return<\/span> router<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u60a8\u6709\u63a5\u89e6\u8fc7express.js\u7684\u7ecf\u9a8c\uff0c\u6211\u8ba4\u4e3a\u60a8\u53ef\u4ee5\u76f8\u5bf9\u5bb9\u6613\u5730\u8fdb\u884c\u81ea\u5b9a\u4e49\u3002\u4f8b\u5982\uff0c\u5bf9\u4e8ecreateApi\u65b9\u6cd5\uff0c\u60a8\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u5b9a\u5236\uff1a<\/p>\n
router<\/span>.<\/span>get<\/span>(<\/span>'<\/span>\/api\/*<\/span>'<\/span>,<\/span> (<\/span>req<\/span>,<\/span> res<\/span>,<\/span> next<\/span>)<\/span> =><\/span> {<\/span>\r\n    res<\/span>.<\/span>json<\/span>(<\/span>req<\/span>.<\/span>url<\/span>);<\/span>\r\n});<\/span>\r\nrouter<\/span>.<\/span>use<\/span>(<\/span>createNgRenderMiddleware<\/span>(<\/span>options<\/span>.<\/span>distPath<\/span>,<\/span> options<\/span>.<\/span>ngSetup<\/span>));<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u6dfb\u52a0\u8def\u7531\u914d\u7f6e\uff0c\u60a8\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u8def\u7531\uff0c\u5f53\u8bbf\u95ee<\u57df\u540d>\/api\/<\u4efb\u610f\u8def\u5f84>\u65f6\uff0c\u4ee5\u8be5\u8def\u5f84\u4f5c\u4e3abody\u8fd4\u56de\u3002<\/p>\n
\u4f7f\u7528\u4f5c\u4e3a\u5fae\u670d\u52a1\u7684\u4ee3\u7406\u548c\u539f\u672c\u7684 BFF \u7528\u9014\u540c\u6837\u53ef\u4ee5\uff0c\u4e5f\u53ef\u4ee5\u7528\u4f5c\u8ba4\u8bc1\u670d\u52a1\u5668\u7684\u5ba2\u6237\u7aef\uff0c\u5982\u679c\u7528 express.js\uff0c\u7528\u6cd5\u65e0\u9650\u5927\u554a\uff01<\/p>\n
\u8ba9\u6211\u4eec\u5728AWS Lambda\u4e0a\u542f\u52a8<\/h1>\n
\u6211\u4e4b\u524d\u7b80\u8981\u4ecb\u7ecd\u4e86Angular Universal\uff0c\u4f46\u82e5\u4e0d\u80fd\u5728\u5b9e\u9645\u8fd0\u8425\u4e2d\u4f7f\u7528\uff0c\u90a3\u5c31\u6ca1\u6709\u610f\u4e49\u4e86\u3002\u56e0\u6b64\uff0c\u63a5\u4e0b\u6765\u6211\u60f3\u4ecb\u7ecd\u5728AWS Lambda\u4e0a\u90e8\u7f72Angular Universal\u7684\u65b9\u6cd5\u3002<\/p>\n
\u521a\u624d\uff0c\u6211\u89e3\u91ca\u4e86Angular Universal\u4f7f\u7528express.js\u4f5c\u4e3aSSR\u670d\u52a1\u5668\u3002\u8fd9\u610f\u5473\u7740\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528Serverless Framework\u5c06\u5176\u90e8\u7f72\u5230AWS Lambda\uff01<\/p>\n
\u51c6\u5907\u597d\u4e86<\/h2>\n
\u8bf7\u63d0\u524d\u51c6\u5907\u597d\u4e00\u4e2aAWS\u8d26\u6237\uff0c\u5e76\u5b89\u88c5aws-cli\u5de5\u5177\uff0c\u5728\u5177\u6709\u7ba1\u7406\u5458\u6743\u9650\u7684IAM\u8d26\u6237\u4e0a\u767b\u5f55\u3002<\/p>\n
\u63a5\u4e0b\u6765\uff0c\u4f7f\u7528npm\u5b89\u88c5aws-serverless-express\u3002<\/p>\n
$ <\/span>npm i aws-serverless-express\r\n<\/code><\/pre>\n
\u8fd9\u662f\u4e00\u4e2a\u4f7f\u7528Serverless Framework\uff0c\u5728lambda\u4e0a\u8fd0\u884cexpress\u670d\u52a1\u5668\u7684\u5e93\u3002<\/p>\n
\u6b64\u5916\uff0c\u8fd8\u9700\u8981\u5c06Serverless Framework\u672c\u8eab\u4f5c\u4e3adevDependencies\u5b89\u88c5\u3002<\/p>\n
$ <\/span>npm i -D<\/span> serverless\r\n<\/code><\/pre>\n
\u4fee\u6539server.ts<\/h2>\n
\u63a5\u4e0b\u6765\uff0c\u5728server.ts\u6587\u4ef6\u4e2d\u52a0\u51654\u884c\u4ee3\u7801\u3002<\/p>\n
\/\/ These are important and needed before anything else<\/span>\r\nimport<\/span> '<\/span>zone.js\/dist\/zone-node<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> '<\/span>reflect-metadata<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> createServer<\/span> }<\/span> from<\/span> '<\/span>http<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> join<\/span> }<\/span> from<\/span> '<\/span>path<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> enableProdMode<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgSetupOptions<\/span> }<\/span> from<\/span> '<\/span>@nguniversal\/express-engine<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> MODULE_MAP<\/span> }<\/span> from<\/span> '<\/span>@nguniversal\/module-map-ngfactory-loader<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> ServerAPIOptions<\/span>,<\/span> createApi<\/span> }<\/span> from<\/span> '<\/span>.\/api<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> environment<\/span> }<\/span> from<\/span> '<\/span>.\/environments\/environment<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> *<\/span> as<\/span> awsServerlessExpress<\/span> from<\/span> '<\/span>aws-serverless-express<\/span>'<\/span>;<\/span> \/\/ <-- \u8ffd\u52a0<\/span>\r\n\r\n\r\n\/\/ WARN: don't remove export of AppServerModule.<\/span>\r\n\/\/ Removing export below will break replaceServerBootstrap() transformer<\/span>\r\nexport<\/span> {<\/span> AppServerModule<\/span> }<\/span> from<\/span> '<\/span>.\/app\/app.server.module<\/span>'<\/span>;<\/span>\r\n\r\n\r\n\/\/ Faster server renders w\/ Prod mode.<\/span>\r\n\/\/ Prod mode isn't enabled by default because that breaks debugging tools like Augury.<\/span>\r\nif<\/span> (<\/span>environment<\/span>.<\/span>production<\/span>)<\/span> {<\/span>\r\n  enableProdMode<\/span>();<\/span>\r\n}<\/span>\r\n\r\n\r\nexport<\/span> const<\/span> PORT<\/span> =<\/span> process<\/span>.<\/span>env<\/span>.<\/span>PORT<\/span> ||<\/span> 4000<\/span>;<\/span>\r\nexport<\/span> const<\/span> BROWSER_DIST_PATH<\/span> =<\/span> join<\/span>(<\/span>__dirname<\/span>,<\/span> '<\/span>..<\/span>'<\/span>,<\/span> '<\/span>browser<\/span>'<\/span>);<\/span>\r\n\r\n\r\nexport<\/span> const<\/span> getNgRenderMiddlewareOptions<\/span>:<\/span> ()<\/span> =><\/span> NgSetupOptions<\/span> =<\/span> ()<\/span> =><\/span> ({<\/span>\r\n  bootstrap<\/span>:<\/span> exports<\/span>.<\/span>AppServerModuleNgFactory<\/span>,<\/span>\r\n  providers<\/span>:<\/span> [<\/span>\r\n    \/\/ Import module map for lazy loading<\/span>\r\n    {<\/span>\r\n      provide<\/span>:<\/span> MODULE_MAP<\/span>,<\/span>\r\n      useFactory<\/span>:<\/span> ()<\/span> =><\/span> exports<\/span>.<\/span>LAZY_MODULE_MAP<\/span>,<\/span>\r\n      deps<\/span>:<\/span> [],<\/span>\r\n    },<\/span>\r\n  ],<\/span>\r\n});<\/span>\r\n\r\nexport<\/span> const<\/span> getServerAPIOptions<\/span>:<\/span> ()<\/span> =><\/span> ServerAPIOptions<\/span> =<\/span> ()<\/span> =><\/span> ({<\/span>\r\n  distPath<\/span>:<\/span> BROWSER_DIST_PATH<\/span>,<\/span>\r\n  ngSetup<\/span>:<\/span> getNgRenderMiddlewareOptions<\/span>(),<\/span>\r\n});<\/span>\r\n\r\n\r\nlet<\/span> requestListener<\/span> =<\/span> createApi<\/span>(<\/span>getServerAPIOptions<\/span>());<\/span>\r\n\r\nconst<\/span> render<\/span> =<\/span> awsServerlessExpress<\/span>.<\/span>createServer<\/span>(<\/span>requestListener<\/span>);<\/span> \/\/ <-- \u8ffd\u52a0<\/span>\r\nexport<\/span> const<\/span> handler<\/span> =<\/span> (<\/span>event<\/span>,<\/span> context<\/span>)<\/span> =><\/span>                         \/\/ <-- \u8ffd\u52a0<\/span>\r\n    awsServerlessExpress<\/span>.<\/span>proxy<\/span>(<\/span>render<\/span>,<\/span> event<\/span>,<\/span> context<\/span>);<\/span>            \/\/ <-- \u8ffd\u52a0<\/span>\r\n\r\n\/\/ Start up the Node server<\/span>\r\nconst<\/span> server<\/span> =<\/span> createServer<\/span>((<\/span>req<\/span>,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>\r\n  requestListener<\/span>(<\/span>req<\/span>,<\/span> res<\/span>);<\/span>\r\n});<\/span>\r\n\r\nserver<\/span>.<\/span>listen<\/span>(<\/span>PORT<\/span>,<\/span> ()<\/span> =><\/span> {<\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>`Server listening -- http:\/\/localhost:<\/span>${<\/span>PORT<\/span>}<\/span>`<\/span>);<\/span>\r\n});<\/span>\r\n\r\n\r\n\/\/ HMR on server side<\/span>\r\nif<\/span> (<\/span>module<\/span>.<\/span>hot<\/span>)<\/span> {<\/span>\r\n  const<\/span> hmr<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    try<\/span> {<\/span>\r\n      const<\/span> {<\/span> AppServerModuleNgFactory<\/span> }<\/span> =<\/span> require<\/span>(<\/span>'<\/span>.\/app\/app.server.module.ngfactory<\/span>'<\/span>);<\/span>\r\n      exports<\/span>.<\/span>AppServerModuleNgFactory<\/span> =<\/span> AppServerModuleNgFactory<\/span>;<\/span>\r\n    }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>warn<\/span>(<\/span>`[HMR] Cannot update export of AppServerModuleNgFactory. <\/span>${<\/span>err<\/span>.<\/span>stack<\/span> ||<\/span> err<\/span>.<\/span>message<\/span>}<\/span>`<\/span>);<\/span>\r\n    }<\/span>\r\n\r\n    try<\/span> {<\/span>\r\n      requestListener<\/span> =<\/span> require<\/span>(<\/span>'<\/span>.\/api<\/span>'<\/span>).<\/span>createApi<\/span>(<\/span>getServerAPIOptions<\/span>());<\/span>\r\n    }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>warn<\/span>(<\/span>`[HMR] Cannot update server api. <\/span>${<\/span>err<\/span>.<\/span>stack<\/span> ||<\/span> err<\/span>.<\/span>message<\/span>}<\/span>`<\/span>);<\/span>\r\n    }<\/span>\r\n  };<\/span>\r\n\r\n  module<\/span>.<\/span>hot<\/span>.<\/span>accept<\/span>(<\/span>'<\/span>.\/api<\/span>'<\/span>,<\/span> hmr<\/span>);<\/span>\r\n  module<\/span>.<\/span>hot<\/span>.<\/span>accept<\/span>(<\/span>'<\/span>.\/app\/app.server.module<\/span>'<\/span>,<\/span> hmr<\/span>);<\/span>\r\n  module<\/span>.<\/span>hot<\/span>.<\/span>accept<\/span>(<\/span>'<\/span>.\/app\/app.server.module.ngfactory<\/span>'<\/span>,<\/span> hmr<\/span>);<\/span>\r\n}<\/span>\r\n\r\n\r\nexport<\/span> default<\/span> server<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u521b\u5efaserverless.yml\u6587\u4ef6<\/h2>\n
\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e0b\uff0c\u521b\u5efa\u4e00\u4e2a\u7528\u4e8eServerless Framework\u7684\u914d\u7f6e\u6587\u4ef6serverless.yml\u3002<\/p>\n
service<\/span>:<\/span> ng-univ-lambda-template<\/span> # lambda\u95a2\u6570\u306b\u3064\u3051\u3089\u308c\u308b\u30b5\u30fc\u30d3\u30b9\u540d<\/span>\r\n\r\nprovider<\/span>:<\/span>\r\n  name<\/span>:<\/span> aws<\/span>\r\n  runtime<\/span>:<\/span> nodejs10.x<\/span>\r\n  stage<\/span>:<\/span> ${env:STAGE}<\/span>\r\n  region<\/span>:<\/span> ap-northeast-1<\/span>\r\n  environment<\/span>:<\/span>\r\n    STAGE<\/span>:<\/span> ${env:STAGE}<\/span>\r\n    NODE_ENV<\/span>:<\/span> ${env:NODE_ENV}<\/span>\r\n  iamRoleStatements<\/span>:<\/span>\r\n    -<\/span> Effect<\/span>:<\/span> '<\/span>Allow'<\/span>\r\n      Action<\/span>:<\/span>\r\n        -<\/span> '<\/span>lambda:InvokeFunction'<\/span>\r\n      Resource<\/span>:<\/span>\r\n        -<\/span> Fn::Join:<\/span>\r\n            - ':'<\/span>\r\n            - - arn:aws:lambda<\/span>\r\n              - Ref<\/span>:<\/span> AWS::Region<\/span>\r\n              - Ref<\/span>:<\/span> AWS::AccountId<\/span>\r\n              - function:${self:service}-${opt:stage, self:provider.stage}-*<\/span>\r\n\r\npackage<\/span>:<\/span>\r\n  exclude<\/span>:<\/span>\r\n    -<\/span> .\/**<\/span>\r\n    -<\/span> '<\/span>!node_modules\/**'<\/span>\r\n  include<\/span>:<\/span>\r\n    -<\/span> dist\/app\/**<\/span>\r\n    -<\/span> package.json<\/span>\r\n\r\nfunctions<\/span>:<\/span>\r\n  render<\/span>:<\/span>\r\n    handler<\/span>:<\/span> dist\/app\/server\/main.handler<\/span>\r\n    events<\/span>:<\/span>\r\n      -<\/span> http<\/span>:<\/span>\r\n          path<\/span>:<\/span> '<\/span>\/'<\/span>\r\n          method<\/span>:<\/span> get<\/span>\r\n      -<\/span> http<\/span>:<\/span>\r\n          path<\/span>:<\/span> '<\/span>{proxy+}'<\/span>\r\n          method<\/span>:<\/span> get<\/span>\r\n      -<\/span> http<\/span>:<\/span>\r\n          path<\/span>:<\/span> '<\/span>\/api\/{proxy+}'<\/span>\r\n          method<\/span>:<\/span> any<\/span>\r\n\r\n<\/code><\/pre>\n
environment<\/span>:<\/span>\r\n    STAGE<\/span>:<\/span> ${env:STAGE}<\/span>\r\n    NODE_ENV<\/span>:<\/span> ${env:NODE_ENV}<\/span>\r\n<\/code><\/pre>\n
\u5728${env:xxx}\u4e2d\uff0c\u5f53\u4ecepackage.json\u4e2d\u8bb0\u5f55\u7684npm\u547d\u4ee4\u6267\u884cserverless\u547d\u4ee4\u65f6\uff0c\u53ef\u4ee5\u6ce8\u5165\u4efb\u610f\u503c\u3002<\/p>\n
\u5728package.json\u4e2d\u6dfb\u52a0\u90e8\u7f72\u547d\u4ee4<\/h2>\n
\"scripts\"<\/span>:<\/span> {<\/span>\r\n    \"ng\"<\/span>:<\/span> \"ng\"<\/span>,<\/span>\r\n    \"prestart\"<\/span>:<\/span> \"npm run build:prod\"<\/span>,<\/span>\r\n    \"start\"<\/span>:<\/span> \"node .\/dist\/app\/server\/main.js\"<\/span>,<\/span>\r\n    \"build\"<\/span>:<\/span> \"ng build\"<\/span>,<\/span>\r\n    \"build:prod\"<\/span>:<\/span> \"ng build -c production\"<\/span>,<\/span>\r\n    \"dev\"<\/span>:<\/span> \"ng serve\"<\/span>,<\/span>\r\n    \"dev:spa\"<\/span>:<\/span> \"ng serve -c spa\"<\/span>,<\/span>\r\n    \"test\"<\/span>:<\/span> \"ng test\"<\/span>,<\/span>\r\n    \"lint\"<\/span>:<\/span> \"ng lint\"<\/span>,<\/span>\r\n    \"e2e\"<\/span>:<\/span> \"ng e2e\"<\/span>,<\/span>\r\n    \"deploy:dev\"<\/span>:<\/span> \"STAGE=dev NODE_ENV=production sls deploy -v\"<\/span>,<\/span> \r\n    \"deploy:prod\"<\/span>:<\/span> \"STAGE=prod NODE_ENV=production sls deploy -v\"<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5728script\u5c5e\u6027\u4e2d\u6dfb\u52a0Lambda\u90e8\u7f72\u6240\u9700\u7684\u547d\u4ee4\u3002
\n\u5728STAGE=dev\u7684\u60c5\u51b5\u4e0b\uff0c\u5c06dev\u6ce8\u5165\u5230\u4e4b\u524d\u5728serverless.yml\u4e2d\u6240\u63cf\u8ff0\u7684${env:STAGE}\u90e8\u5206\u3002
\n\u6362\u53e5\u8bdd\u8bf4\uff0c\u901a\u8fc7\u6267\u884c\u4e0d\u540c\u7684npm\u547d\u4ee4\uff0c\u53ef\u4ee5\u533a\u5206\u4e0d\u540c\u7684\u90e8\u7f72\u9636\u6bb5\u3002<\/p>\n
\u5c1d\u8bd5\u6267\u884c<\/h2>\n
\u5f53\u5b8c\u6210\u5230\u8fd9\u4e00\u6b65\u65f6\uff0c\u8ba9\u6211\u4eec\u5b9e\u9645\u6267\u884c\u90e8\u7f72\u5230AWS Lambda\u7684\u64cd\u4f5c\u3002<\/p>\n
$ <\/span>npm run build:prod\r\n$ <\/span>npm run deploy:prod\r\n<\/code><\/pre>\n
\u5982\u679c\u4ee5\u4e0b\u8fd9\u6837\u7684\u65e5\u5fd7\u4f9d\u6b21\u6eda\u52a8\u663e\u793a\uff0c\u5e76\u5728\u6700\u540e\u663e\u793a\u201cStack Outputs\u201d\uff0c\u5219\u8868\u793a\u6b63\u5e38\u5b8c\u6210\u3002<\/p>\n
><\/span> angular-universal@0.0.0 deploy:prod \/mnt\/f\/Documents\/Program\/angular-universal-aws-lambda-template\r\n><\/span> STAGE<\/span>=<\/span>prod NODE_ENV<\/span>=<\/span>production sls deploy -v<\/span>\r\n\r\nServerless: Packaging service...\r\nServerless: Excluding development dependencies...\r\nServerless: Uploading CloudFormation file to S3...\r\nServerless: Uploading artifacts...\r\nServerless: Uploading service ng-univ-lambda-template.zip file to S3 (<\/span>42.73 MB)<\/span>...\r\nServerless: Validating template...\r\nServerless: Updating Stack...\r\nServerless: Checking Stack update progress...\r\nCloudFormation - UPDATE_IN_PROGRESS - AWS::CloudFormation::Stack - ng-univ-lambda-template-prod\r\nCloudFormation - UPDATE_IN_PROGRESS - AWS::Lambda::Function - RenderLambdaFunction\r\nCloudFormation - UPDATE_COMPLETE - AWS::Lambda::Function - RenderLambdaFunction\r\nCloudFormation - CREATE_IN_PROGRESS - AWS::Lambda::Version - RenderLambdaVersionElfmXkriWTVEnPo0XfUNZ1T1CVRpAuAdg2aokSEQoo\r\nCloudFormation - CREATE_IN_PROGRESS - AWS::ApiGateway::Deployment - ApiGatewayDeployment1576305173492\r\nCloudFormation - CREATE_IN_PROGRESS - AWS::ApiGateway::Deployment - ApiGatewayDeployment1576305173492\r\nCloudFormation - CREATE_IN_PROGRESS - AWS::Lambda::Version - RenderLambdaVersionElfmXkriWTVEnPo0XfUNZ1T1CVRpAuAdg2aokSEQoo\r\nCloudFormation - CREATE_COMPLETE - AWS::ApiGateway::Deployment - ApiGatewayDeployment1576305173492\r\nCloudFormation - CREATE_COMPLETE - AWS::Lambda::Version - RenderLambdaVersionElfmXkriWTVEnPo0XfUNZ1T1CVRpAuAdg2aokSEQoo\r\nCloudFormation - UPDATE_COMPLETE_CLEANUP_IN_PROGRESS - AWS::CloudFormation::Stack - ng-univ-lambda-template-prod\r\nCloudFormation - DELETE_IN_PROGRESS - AWS::ApiGateway::Deployment - ApiGatewayDeployment1576304091991\r\nCloudFormation - DELETE_SKIPPED - AWS::Lambda::Version - RenderLambdaVersionmvp3W8wvhJNl7SWlw0ZESTVimlL6FGADyblQJnjgLpY\r\nCloudFormation - DELETE_COMPLETE - AWS::ApiGateway::Deployment - ApiGatewayDeployment1576304091991\r\nCloudFormation - UPDATE_COMPLETE - AWS::CloudFormation::Stack - ng-univ-lambda-template-prod\r\nServerless: Stack update finished...\r\nService Information\r\nservice: ng-univ-lambda-template\r\nstage: prod\r\nregion: ap-northeast-1\r\nstack: ng-univ-lambda-template-prod\r\nresources: 15\r\napi keys:\r\n  None\r\nendpoints:\r\n  GET - https:\/\/xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com\/prod\/\r\n  GET - https:\/\/xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com\/prod\/{<\/span>proxy+}<\/span>\r\n  ANY - https:\/\/xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com\/prod\/api\/{<\/span>proxy+}<\/span>\r\nfunctions:\r\n  render: ng-univ-lambda-template-prod-render\r\nlayers:\r\n  None\r\n\r\nStack Outputs\r\nRenderLambdaFunctionQualifiedArn: arn:aws:lambda:ap-northeast-1:XXXXXXXXXXXX:function:ng-univ-lambda-template-prod-render:14\r\nServiceEndpoint: https:\/\/xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com\/prod\r\nServerlessDeploymentBucketName: ng-univ-lambda-template-serverlessdeploymentbuck-xxxxxxxxxxxx\r\n\r\nServerless: Removing old service artifacts from S3...\r\nServerless: Run the \"serverless\"<\/span> command <\/span>to setup monitoring, troubleshooting and testing.\r\n<\/code><\/pre>\n
\"image.png\"<\/div>\n
\u8ba9\u6211\u4eec\u5c1d\u8bd5\u901a\u8fc7AWS CodePipeline + CodeBuild\u6765\u5b9e\u73b0\u81ea\u52a8\u5316\u90e8\u7f72\u3002<\/h1>\n
\u65e2\u7136\u6211\u4eec\u4f7f\u7528\u4e86AWS\uff0c\u90a3\u6211\u4eec\u53ef\u4ee5\u5c1d\u8bd5\u7740\u521b\u5efa\u4e00\u4e2a\u673a\u5236\uff0c\u5f53\u6211\u4eec\u5c06\u4ee3\u7801\u63a8\u9001\u5230GitHub\u4ed3\u5e93\u65f6\uff0cLambda\u51fd\u6570\u4f1a\u81ea\u52a8\u90e8\u7f72\u3002<\/p>\n
\u521b\u5efabuildspec.yml\u6587\u4ef6<\/h2>\n
\u6211\u5011\u5c07\u6e96\u5099\u7528\u65bc CodeBuild \u7684\u8a2d\u5b9a\u6587\u4ef6 buildspec.yml\u3002<\/p>\n
version<\/span>:<\/span> 0.2<\/span>\r\n\r\nphases<\/span>:<\/span>\r\n  install<\/span>:<\/span>\r\n    runtime-versions<\/span>:<\/span>\r\n      nodejs<\/span>:<\/span> 10<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> npm install<\/span>\r\n  build<\/span>:<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> npm run build:${DEPLOY_STAGE}<\/span>\r\n  post_build<\/span>:<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> npm run deploy:${DEPLOY_STAGE}<\/span>\r\n<\/code><\/pre>\n
\u8fdb\u884cCodeBuild\u7684\u8bbe\u7f6e<\/h2>\n
\u8bf7\u63a5\u4e0b\u6765\u767b\u5f55\u5230AWS\u7ba1\u7406\u63a7\u5236\u53f0\u7684\u754c\u9762\u4e0a\u3002<\/p>\n
\u5728CodeBuild\u4e2d\uff0c\u4eceBuild\u9879\u76ee\u7684\u9875\u9762\u4e2d\uff0c\u70b9\u51fb\u201c\u521b\u5efaBuild\u9879\u76ee\u201d\u3002<\/p>\n
\"image.png\"<\/div>\n
\u8bf7\u5728\u8f6c\u5230\u521b\u5efa\u753b\u9762\u540e\uff0c\u6309\u7167\u4e0b\u9762\u7684\u65b9\u5f0f\u8f93\u5165\u3002<\/p>\n
\"image.png\"<\/div>\n
    \n
  • \n
      \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u8a2d\u5b9a – \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u3000\u2192\u3000\u4efb\u610f\u306e\u3082\u306e<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        \n
      • \n
          \u9001\u4fe1\u5143 – \u30bd\u30fc\u30b91\u3000\u2192\u3000\u30bd\u30fc\u30b9\u30d7\u30ed\u30d0\u30a4\u30c0\u3092GitHub\u306b\u8a2d\u5b9a\u3057\u3001OAuth\u63a5\u7d9a\u3057\u3066\u4f5c\u6210\u3057\u305f\u3054\u81ea\u5206\u306e\u30ea\u30dd\u30b8\u30c8\u30ea\u3092\u9078\u629e<\/ul>\n<\/li>\n<\/ul>\n
           <\/p>\n
            \n
          • \n
              \u74b0\u5883 – \u30aa\u30da\u30ec\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u3000\u2192\u3000Amazon Linux 2<\/ul>\n<\/li>\n<\/ul>\n
               <\/p>\n
                \n
              • \n
                  \u74b0\u5883 – \u30e9\u30f3\u30bf\u30a4\u30e0\u3000\u2192\u3000Standard<\/ul>\n<\/li>\n<\/ul>\n
                   <\/p>\n
                    \n
                  • \n
                      \u74b0\u5883 – \u30a4\u30e1\u30fc\u30b8\u3000\u2192\u3000x86_64\u306e\u3082\u306e<\/ul>\n<\/li>\n<\/ul>\n
                       <\/p>\n
                        \n
                      • \n
                          \u74b0\u5883 – \u30b5\u30fc\u30d3\u30b9\u30ed\u30fc\u30eb\u3000\u2192\u3000\u65b0\u3057\u3044\u30b5\u30fc\u30d3\u30b9\u30ed\u30fc\u30eb<\/ul>\n<\/li>\n<\/ul>\n
                           <\/p>\n
                            \n
                          • \n
                              \u74b0\u5883 – \u30ed\u30fc\u30eb\u540d\u3000\u2192\u3000\u4efb\u610f\u306e\u3082\u306e<\/ul>\n<\/li>\n<\/ul>\n
                               <\/p>\n
                                \n
                              • \n
                                  \u74b0\u5883 – \u8ffd\u52a0\u8a2d\u5b9a – \u74b0\u5883\u5909\u6570\u3000\u2192\u3000prod\u30b9\u30c6\u30fc\u30b8\u306a\u3089\u540d\u524d\uff1aDEPLOY_STAGE \u5024\uff1aprod\u3068\u306a\u308b\u3088\u3046\u306b\u8a2d\u5b9a<\/ul>\n<\/li>\n<\/ul>\n
                                   <\/p>\n
                                    Buildspec – \u30d3\u30eb\u30c9\u4ed5\u69d8\u3000\u2192\u3000buildspec\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3059\u308b<\/ul>\n
                                    \u5b8c\u6210\u8f93\u5165\u540e\uff0c\u70b9\u51fb”\u521b\u5efa\u6784\u5efa\u9879\u76ee”\u3002<\/p>\n
                                    \"image.png\"<\/div>\n
                                    \u9019\u662f\u4ee5\u9019\u7a2e\u65b9\u5f0f\u5275\u5efa\u7684\u3002<\/p>\n
                                    \u7531\u4e8e\u6784\u5efa\u9879\u76ee\u7684\u670d\u52a1\u89d2\u8272\u6ca1\u6709\u7ba1\u7406\u5458\u6743\u9650\uff0c\u56e0\u6b64\u65e0\u6cd5\u6210\u529f\u90e8\u7f72serverless\u3002
                                    \n\u8bf7\u52a1\u5fc5\u4e8b\u5148\u9644\u52a0”AdministratorAccess”\u7b56\u7565\u3002
                                    \n\uff08\u5b9e\u9645\u4e0a\u53ea\u9644\u52a0\u4f7f\u7528\u6240\u9700\u7684\u7b56\u7565\u66f4\u597d\uff0c\u4f46\u662f\u592a\u591a\u7b56\u7565\u4f1a\u5f88\u96be\u627e\u5230\u6240\u9700\u7684\u7b56\u7565\uff09<\/p>\n
                                    \u8fdb\u884cCodePipeline\u7684\u8bbe\u7f6e<\/h2>\n
                                    \"image.png\"<\/div>\n
                                      \n
                                    • \n
                                        \u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u540d\u3000\u2192\u3000\u4efb\u610f\u306e\u3082\u306e<\/ul>\n<\/li>\n<\/ul>\n
                                         <\/p>\n
                                          \u30ed\u30fc\u30eb\u540d\u3000\u2192\u3000\u4efb\u610f\u306e\u3082\u306e<\/ul>\n
                                          \"image.png\"<\/div>\n
                                            \u30bd\u30fc\u30b9\u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u3000\u2192\u3000GitHub\u3092\u9078\u629e\u3057\u3001\u300cGitHub\u306b\u63a5\u7d9a\u3059\u308b\u300d\u3092\u30af\u30ea\u30c3\u30af\u3002\u3054\u81ea\u5206\u306e\u30ea\u30dd\u30b8\u30c8\u30ea\u3068\u30d6\u30e9\u30f3\u30c1\u3092\u9078\u629e<\/ul>\n
                                            \"image.png\"<\/div>\n
                                              \n
                                            • \n
                                                \u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u3092\u69cb\u7bc9\u3059\u308b\u3000\u2192\u3000AWS CodeBuild<\/ul>\n<\/li>\n<\/ul>\n
                                                 <\/p>\n
                                                  \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u3000\u2192\u3000\u5148\u307b\u3069\u4f5c\u6210\u3057\u305fCodeBuild\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u9078\u629e<\/ul>\n
                                                  \u8df3\u8fc7\u90e8\u7f72\u9636\u6bb5\u3002<\/p>\n
                                                  \"image.png\"<\/div>\n
                                                  \u7ba1\u9053\u7684\u521b\u5efa\u5df2\u7ecf\u5b8c\u6210\u3002\u540c\u65f6\uff0c\u90e8\u7f72\u4e5f\u5df2\u7ecf\u5f00\u59cb\uff0c\u4ee5\u786e\u8ba4\u662f\u5426\u6210\u529f\u3002
                                                  \n\u73b0\u5728\uff0c\u5f53\u60a8\u5c06\u4ee3\u7801\u63a8\u9001\u5230GitHub\u65f6\uff0c\u5c06\u4f1a\u81ea\u52a8\u5c06\u5176\u90e8\u7f72\u5230Lambda\u4e2d\uff01<\/p>\n
                                                  \u53ea\u9700\u4eceS3\u6258\u7ba1\u9759\u6001\u6587\u4ef6\u3002<\/h1>\n
                                                  \u5728\u8fd9\u4e2a\u9636\u6bb5\uff0c\u6d4f\u89c8\u5668\u7528\u7684\u9759\u6001\u6587\u4ef6\u548c\u670d\u52a1\u5668\u90fd\u88ab\u90e8\u7f72\u5728Lambda\u4e0a\uff0c\u5e76\u4eceAPI Gateway\u8fdb\u884c\u6258\u7ba1\u3002
                                                  \n\u5c3d\u7ba1\u5982\u6b64\uff0c\u5982\u679c\u60f3\u5728\u524d\u7aef\u52a0\u4e0aCloudFront\uff0c\u6700\u597d\u5c06\u6d4f\u89c8\u5668\u7528\u7684\u9759\u6001\u6587\u4ef6\u6258\u7ba1\u5728S3\u4e0a\uff0c\u56e0\u4e3a\u8fd9\u6837\u7684\u914d\u7f6e\u66f4\u52a0\u65b9\u4fbf\uff0c\u6240\u4ee5\u6211\u4f1a\u5c1d\u8bd5\u5c06\u7cfb\u7edf\u6539\u9020\u6210\u8fd9\u6837\u7684\u7ed3\u6784\u3002<\/p>\n
                                                  \u521b\u5efa\u4e00\u4e2aS3\u5b58\u50a8\u6876<\/h2>\n
                                                  \u7528\u9002\u5f53\u7684\u540d\u79f0\u521b\u5efaS3\u5b58\u50a8\u6876\u3002
                                                  \n\u7701\u7565\u521b\u5efa\u6b65\u9aa4\u3002<\/p>\n
                                                  \u4fee\u6539buildspec.yml<\/h2>\n
                                                  version<\/span>:<\/span> 0.2<\/span>\r\n\r\nphases<\/span>:<\/span>\r\n  install<\/span>:<\/span>\r\n    runtime-versions<\/span>:<\/span>\r\n      nodejs<\/span>:<\/span> 10<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> npm install<\/span>\r\n  build<\/span>:<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> npm run build:${DEPLOY_STAGE}<\/span>\r\n  post_build<\/span>:<\/span>\r\n    commands<\/span>:<\/span>\r\n      -<\/span> aws s3 rm s3:\/\/${BUCKET_NAME} --recursive<\/span>                   # \u8ffd\u52a0<\/span>\r\n      -<\/span> aws s3 sync .\/dist\/app\/browser s3:\/\/${BUCKET_NAME}\/_angular<\/span> # \u8ffd\u52a0<\/span>\r\n      -<\/span> npm run deploy:${DEPLOY_STAGE}<\/span>\r\n      -<\/span> aws cloudfront create-invalidation --distribution-id ${DISTRIBUTION_ID} --paths \"\/*\"<\/span> # \u8ffd\u52a0<\/span>\r\n<\/code><\/pre>\n
                                                  \u5728 post_build \u547d\u4ee4\u4e2d\uff0c\u4fee\u6b63\u4ee5\u4fbf\u540c\u65f6\u8fdb\u884c\u5411 S3 \u7684\u4e0a\u4f20\u548c CloudFront \u7684\u5237\u65b0\u65e0\u6548\u5316\u3002<\/p>\n
                                                  \u4fee\u6539angular.json\u3002<\/h2>\n
                                                  \"options\"<\/span>:<\/span> {<\/span>\r\n    \"outputPath\"<\/span>:<\/span> \"dist\/app\/browser\"<\/span>,<\/span>\r\n    \"deployUrl\"<\/span>:<\/span> \"\/_angular\/\"<\/span>,<\/span> \/\/<\/span> <--<\/span> \u8ffd\u52a0<\/span>\r\n    \"index\"<\/span>:<\/span> \"src\/index.html\"<\/span>,<\/span>\r\n    \"main\"<\/span>:<\/span> \"src\/main.ts\"<\/span>,<\/span>\r\n    \"polyfills\"<\/span>:<\/span> \"src\/polyfills.ts\"<\/span>,<\/span>\r\n    \"tsConfig\"<\/span>:<\/span> \"tsconfig.app.json\"<\/span>,<\/span>\r\n    \"assets\"<\/span>:<\/span> [<\/span>\"src\/favicon.ico\"<\/span>,<\/span> \"src\/assets\"<\/span>],<\/span>\r\n    \"styles\"<\/span>:<\/span> [<\/span>\"src\/styles.scss\"<\/span>],<\/span>\r\n    \"scripts\"<\/span>:<\/span> []<\/span>\r\n}<\/span>,<\/span>\r\n<\/code><\/pre>\n
                                                  \u4e3a\u4e86\u5c06HTML\u4e2d\u7684\u9759\u6001\u6587\u4ef6\u52a0\u8f7d\u5230\/_angular\u8def\u5f84\u4e0b\uff0c\u6211\u4eec\u9700\u8981\u6dfb\u52a0deployUrl\u5c5e\u6027\u3002\u8fd9\u6837\u4e00\u6765\uff0cCloudFront\u7684\u8bbe\u7f6e\u5c31\u66f4\u52a0\u7b80\u4fbf\u4e86\u3002<\/p>\n
                                                  \u8fdb\u884cCloudFront\u7684\u914d\u7f6e<\/h2>\n
                                                  \"image.png\"<\/div>\n
                                                    Origin Domain Name\u3000\u2192\u3000\u30c7\u30d7\u30ed\u30a4\u6e08\u307f\u306eAPI Gateway\u306e\u30b9\u30c6\u30fc\u30b8\u306eURL<\/ul>\n
                                                    \u5176\u4ed6\u8bbe\u7f6e\u53ef\u6839\u636e\u60a8\u7684\u559c\u597d\u8fdb\u884c\u8c03\u6574\uff0c\u6ca1\u6709\u95ee\u9898\u3002<\/p>\n
                                                    \"image.png\"<\/div>\n
                                                      \n
                                                    • \n
                                                        Origin Domain Name\u3000\u2192\u3000\u5148\u307b\u3069\u4f5c\u6210\u3057\u305fS3\u30d0\u30b1\u30c3\u30c8\u3092\u9078\u629e<\/ul>\n<\/li>\n<\/ul>\n
                                                         <\/p>\n
                                                          \n
                                                        • \n
                                                            Restrict Bucket Access\u3000\u2192\u3000Yes<\/ul>\n<\/li>\n<\/ul>\n
                                                             <\/p>\n
                                                              \n
                                                            • \n
                                                                Origin Access Identity\u3000\u2192\u3000Create a New Identity<\/ul>\n<\/li>\n<\/ul>\n
                                                                 <\/p>\n
                                                                  Grant Read Permissions on Bucket\u3000\u2192\u3000Yes, Update Bucket Policy<\/ul>\n
                                                                  \"image.png\"<\/div>\n
                                                                    \n
                                                                  • \n
                                                                      Path Pattern\u3000\u2192\u3000_angular\/*<\/ul>\n<\/li>\n<\/ul>\n
                                                                       <\/p>\n
                                                                        Origin or Origin Group\u3000\u2192\u3000\u5148\u307b\u3069\u4f5c\u6210\u3057\u305fS3\u3078\u306eOrigin<\/ul>\n
                                                                        \u5176\u4ed6\u8bbe\u5b9a\u6309\u7167\u60a8\u7684\u559c\u597d\u3002<\/p>\n
                                                                        \u9019\u6a23\u4e00\u4f86\uff0cCloudFront\u7684\u8a2d\u7f6e\u5c31\u5b8c\u6210\u4e86\u3002
                                                                        \n\u525b\u624d\u53bbangular.json\u8a2d\u7f6edeployUrl\uff0c\u6240\u4ee5\u700f\u89bd\u5668\u7684\u975c\u614b\u6587\u4ef6\u5c07\u5b58\u5728\u65bc\/_angular\u8cc7\u6599\u593e\u5167\u3002
                                                                        \n\u7576\u5617\u8a66\u8a2a\u554f\u8a72\u8cc7\u6599\u593e\u6642\uff0c\u6211\u5011\u9700\u8981\u8a2d\u7f6e\u5f9eS3\u5b58\u5132\u6876\u4e2d\u53d6\u56de\u6587\u4ef6\u3002<\/p>\n
                                                                        \u4fee\u6539CodeBuild\u7684\u8bbe\u7f6e<\/h2>\n
                                                                        \"image.png\"<\/div>\n
                                                                        \u540e\u8bb0<\/h1>\n
                                                                        \u6211\u4ecb\u7ecd\u4e86\u4e00\u4e2a\u7528\u4e8e\u5728Angular\u8fdb\u884c\u670d\u52a1\u5668\u7aef\u6e32\u67d3\uff08SSR\uff09\u7684\u5e93Angular Universal\uff0c\u4ee5\u53ca\u53ef\u5728\u4e00\u6b21\u514b\u9686\u4e2d\u6784\u5efa\u4f7f\u7528\u8be5\u5e93\u7684\u5f00\u53d1\u73af\u5883@enten\/angular-universal\uff0c\u5e76\u5c06\u6784\u5efa\u7ed3\u679c\u90e8\u7f72\u5230AWS Lambda\u4ee5\u5b9e\u73b0\u65e0\u670d\u52a1\u5668\u6258\u7ba1\u7684\u65b9\u6cd5\u3002
                                                                        \n\u5728\u7f51\u7edc\u4e0a\u5f88\u5c11\u6709\u5173\u4e8e\u6700\u4f73\u5b9e\u8df5\u7684\u4fe1\u606f\uff0c\u5373\u4f7f\u5728\u5b98\u65b9\u6587\u6863\u4e2d\uff0c\u770b\u8d77\u6765\u4e5f\u5f88\u201c\u7e41\u7410\u201d\u3002\u4f46\u901a\u8fc7\u6211\u4eec\u4ecb\u7ecd\u7684\u65b9\u6cd5\uff0c\u6216\u8bb8\u53ef\u4ee5\u76f8\u5bf9\u8f7b\u677e\u5730\u4f53\u9a8cAngular Universal\u7684\u4e16\u754c\u3002<\/p>\n
                                                                        \"image.png\"<\/div>\n
                                                                        \u6e90\u4ee3\u7801<\/h1>\n
                                                                        \u8bf7\u53c2\u8003\u3002<\/h1>\n
                                                                        https:\/\/qiita.com\/kobayashi-m42\/items\/fbacb46f7603e5a014d7 – Nuxt.js(SSR)\u3092Lambda\u3067\u914d\u4fe1\u3059\u308b\u3010\u500b\u4eba\u958b\u767a\u3011<\/p>\n
                                                                        https:\/\/qiita.com\/MasanobuAkiba\/items\/7adcfd5050150ac9ba36 – SSR \u306e\u77e5\u8b58\u30bc\u30ed\u304b\u3089\u59cb\u3081\u308b Angular Universal<\/p>\n
                                                                        https:\/\/github.com\/enten\/angular-universal – @enten\/angular-universal<\/p>\n","protected":false},"excerpt":{"rendered":"
                                                                        \u8fd9\u7bc7\u6587\u7ae0\u662f2019\u5e74Angular #2\u5f69\u8679\u65e5\u5386\u7684\u7b2c20\u5929\u6587\u7ae0\u3002 \u4f60\u597d\u3002\u6211\u662f @seapolis\u3002\u6211\u5728\u7b2c\u4e00\u6b21\u7684 […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39604","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular-universal\u5728aws-lambda-s3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684ssr\u9002\u914dweb\u5e94\u7528\u5f00\u53d1\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1\" \/>\n<meta property=\"og:description\" content=\"\u8fd9\u7bc7\u6587\u7ae0\u662f2019\u5e74Angular #2\u5f69\u8679\u65e5\u5386\u7684\u7b2c20\u5929\u6587\u7ae0\u3002 \u4f60\u597d\u3002\u6211\u662f @seapolis\u3002\u6211\u5728\u7b2c\u4e00\u6b21\u7684 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular-universal\u5728aws-lambda-s3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684ssr\u9002\u914dweb\u5e94\u7528\u5f00\u53d1\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-05T08:04:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T10:29:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b6137434c4406c8124e\/52-0.png\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/\",\"name\":\"\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-12-05T08:04:32+00:00\",\"dateModified\":\"2024-04-29T10:29:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular-universal\u5728aws-lambda-s3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684ssr\u9002\u914dweb\u5e94\u7528\u5f00\u53d1\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1","og_description":"\u8fd9\u7bc7\u6587\u7ae0\u662f2019\u5e74Angular #2\u5f69\u8679\u65e5\u5386\u7684\u7b2c20\u5929\u6587\u7ae0\u3002 \u4f60\u597d\u3002\u6211\u662f @seapolis\u3002\u6211\u5728\u7b2c\u4e00\u6b21\u7684 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular-universal\u5728aws-lambda-s3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684ssr\u9002\u914dweb\u5e94\u7528\u5f00\u53d1\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-12-05T08:04:32+00:00","article_modified_time":"2024-04-29T10:29:19+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b6137434c4406c8124e\/52-0.png"}],"author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"8 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/","name":"\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-12-05T08:04:32+00:00","dateModified":"2024-04-29T10:29:19+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528Angular Universal\u5728AWS Lambda + S3\u4e0a\u8fdb\u884c\u4fbf\u6377\u7684SSR\u9002\u914dWeb\u5e94\u7528\u5f00\u53d1"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-universal%e5%9c%a8aws-lambda-s3%e4%b8%8a%e8%bf%9b%e8%a1%8c%e4%be%bf%e6%8d%b7%e7%9a%84ssr%e9%80%82%e9%85%8dweb%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39604"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39604\/revisions"}],"predecessor-version":[{"id":86913,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39604\/revisions\/86913"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}