29 | 30 | 31 | 32 | ); 33 | } 34 | } 35 | export default MyDocument; 36 | -------------------------------------------------------------------------------- /pages/about.tsx: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout'; 2 | 3 | const AboutPage = () => ( 4 | 5 |

6 |

关于项目

7 |

8 | 使用 Next.js + TypeScript 开发，并且基于 Serverless 部署的 V2EX 客户端 9 |

10 |

源码地址

11 |

12 | 13 | https://github.com/serverless-plus/serverless-v2ex 14 | 15 |

16 |

意见反馈

17 |

18 | 19 | 发表意见或者提需求 20 | 21 |

22 |

当前版本

23 |

V0.0.1

24 |

25 | 26 | ); 27 | 28 | export default AboutPage; 29 | -------------------------------------------------------------------------------- /pages/api/topics/detail.ts: -------------------------------------------------------------------------------- 1 | import { NextApiRequest, NextApiResponse } from 'next'; 2 | import { getTopic } from '../../../apis'; 3 | 4 | const handler = async (req: NextApiRequest, res: NextApiResponse) => { 5 | try { 6 | const id = req.query.id; 7 | if (id) { 8 | const topic = await getTopic(id as string); 9 | 10 | res.status(200).json(topic); 11 | } else { 12 | res.status(500).json({ statusCode: 500, message: 'Topic id not exist.' }); 13 | } 14 | } catch (err) { 15 | res.status(500).json({ statusCode: 500, message: err.message }); 16 | } 17 | }; 18 | 19 | export default handler; 20 | -------------------------------------------------------------------------------- /pages/api/topics/index.ts: -------------------------------------------------------------------------------- 1 | import { NextApiRequest, NextApiResponse } from 'next'; 2 | import { getTopicList } from '../../../apis'; 3 | 4 | const handler = async (req: NextApiRequest, res: NextApiResponse) => { 5 | try { 6 | const tab = req.query.tab || 'latest'; 7 | const topics = await getTopicList(tab as string); 8 | 9 | res.status(200).json(topics); 10 | } catch (err) { 11 | res.status(500).json({ statusCode: 500, message: err.message }); 12 | } 13 | }; 14 | 15 | export default handler; 16 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { GetServerSideProps, GetServerSidePropsContext } from 'next'; 3 | import Layout from '../components/Layout'; 4 | import { getTopicList } from '../apis'; 5 | import { Topic } from '../interfaces'; 6 | import { TopicList } from '../components/TopicList'; 7 | 8 | interface Props { 9 | topics: Topic[]; 10 | } 11 | 12 | const IndexPage = ({ topics }: Props) => { 13 | return ( 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export const getServerSideProps: GetServerSideProps = async ( 21 | context: GetServerSidePropsContext, 22 | ) => { 23 | const { query = {} } = context; 24 | const tab = query.tab ? (query.tab as string) : 'latest'; 25 | 26 | const topics: Topic[] = await getTopicList(tab); 27 | return { props: { topics } }; 28 | }; 29 | 30 | export default IndexPage; 31 | -------------------------------------------------------------------------------- /pages/topic.tsx: -------------------------------------------------------------------------------- 1 | import { GetServerSideProps, GetServerSidePropsContext } from 'next'; 2 | import Layout from '../components/Layout'; 3 | import { formatDate } from '../utils'; 4 | import { getTopic } from '../apis'; 5 | import { Loading } from '../components/Loading'; 6 | import { Topic } from '../interfaces'; 7 | // import BackToTop from './BackTop'; 8 | 9 | type TopicProps = { 10 | topic: Topic; 11 | topicId: string; 12 | }; 13 | 14 | const TopicPage = ({ topic }: TopicProps) => { 15 | const { replyList = [] } = topic || {}; 16 | 17 | //获取回复列表 18 | let repliesItems: JSX.Element[] = []; 19 | if (replyList.length > 0) { 20 | repliesItems = replyList.map((reply, i) => { 21 | return ( 22 |

23 |

24 |

25 |

26 |

27 |

28 | 29 | {reply.member.username} 30 | {formatDate(reply.last_modified)} 31 | 32 |

33 |

37 |

38 |

39 | ); 40 | }); 41 | } 42 | 43 | return ( 44 | 45 | {topic && topic.member ? ( 46 |

47 |

48 |

49 |

50 |

51 | {topic.title} 52 |

53 |

54 | 55 | {topic.member.username} 56 | {formatDate(topic.last_modified)} 57 | 58 |

59 |

60 |

61 |

64 |

65 |

66 |

70 |

71 | {repliesItems} 72 |

73 | ) : ( 74 | 75 | )} 76 | {/* */} 77 | 78 | ); 79 | }; 80 | 81 | export const getServerSideProps: GetServerSideProps = async ( 82 | context: GetServerSidePropsContext, 83 | ) => { 84 | const { query = {} } = context; 85 | 86 | if (query && query.id) { 87 | const topic: Topic = await getTopic(query.id as string); 88 | 89 | return { props: { topic: topic, topicId: query.id } }; 90 | } 91 | return { props: { topic: {} } }; 92 | }; 93 | 94 | export default TopicPage; 95 | -------------------------------------------------------------------------------- /pages/topics.tsx: -------------------------------------------------------------------------------- 1 | import { GetServerSideProps, GetServerSidePropsContext } from 'next'; 2 | import Layout from '../components/Layout'; 3 | import { Topic } from '../interfaces'; 4 | import { getTopicList } from '../apis'; 5 | import { TopicList } from '../components/TopicList'; 6 | 7 | interface Props { 8 | tab: string; 9 | topics: Topic[]; 10 | } 11 | 12 | const TopicsPage = ({ tab, topics }: Props) => { 13 | return ( 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export const getServerSideProps: GetServerSideProps = async ( 21 | context: GetServerSidePropsContext, 22 | ) => { 23 | const { query = {} } = context; 24 | const tab = query.tab ? (query.tab as string) : 'latest'; 25 | 26 | const topics: Topic[] = await getTopicList(tab); 27 | return { props: { topics, tab } }; 28 | }; 29 | 30 | export default TopicsPage; 31 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serverless-plus/serverless-v2ex/c1309bbcff928a3f821457e8200ac9bc5a7a7ace/public/favicon.png -------------------------------------------------------------------------------- /server/index.ts: -------------------------------------------------------------------------------- 1 | import { join } from 'path'; 2 | import Next from 'next'; 3 | import Express, { Request, Response } from 'express'; 4 | import { ParsedUrlQuery } from 'querystring'; 5 | import cacheableResponse from 'cacheable-response'; 6 | 7 | const dev = process.env.NODE_ENV !== 'production'; 8 | const port = parseInt(process.env.PORT as string, 10) || 8000; 9 | 10 | const app = Next({ dev }); 11 | const handle = app.getRequestHandler(); 12 | 13 | type CacheOptions = { 14 | req: Request; 15 | res: Response; 16 | }; 17 | 18 | const ssrCache = cacheableResponse({ 19 | ttl: 1000 * 60 * 60, // 1hour 20 | get: async ({ req, res }: CacheOptions) => { 21 | const data = await app.render(req, res, req.path, { 22 | ...(req.query as ParsedUrlQuery), 23 | ...req.params, 24 | }); 25 | 26 | // Add here custom logic for when you do not want to cache the page, for 27 | // example when the page returns a 404 status code: 28 | if (res.statusCode === 404) { 29 | res.end(data); 30 | return null; 31 | } 32 | 33 | return null; 34 | }, 35 | send: ({ data, res }) => res.send(data), 36 | }); 37 | 38 | async function startServer() { 39 | await app.prepare(); 40 | 41 | const server = Express(); 42 | server.use(Express.static(join(__dirname, '../public/static'))); 43 | 44 | server.get('/', async (req, res) => { 45 | return ssrCache({ req, res }); 46 | }); 47 | 48 | server.get('/about', async (req, res) => { 49 | return ssrCache({ req, res }); 50 | }); 51 | 52 | server.get('/topic', async (req, res) => { 53 | return ssrCache({ req, res }); 54 | }); 55 | 56 | server.get('*', (req, res) => { 57 | // @ts-ignore 58 | req['__SLS_NO_REPORT__'] = true; 59 | return handle(req, res); 60 | }); 61 | 62 | // define binary type for response 63 | // if includes, will return base64 encoded, very useful for images 64 | // @ts-ignore 65 | server['binaryTypes'] = ['*/*']; 66 | 67 | return server; 68 | } 69 | 70 | if (process.env.SERVERLESS) { 71 | module.exports = startServer; 72 | } else { 73 | try { 74 | startServer().then((server) => { 75 | server.listen(port, () => { 76 | console.log(`> Ready on http://localhost:${port}`); 77 | }); 78 | }); 79 | } catch (e) { 80 | throw e; 81 | } 82 | } 83 | 84 | process.on('unhandledRejection', (e) => { 85 | throw e; 86 | }); 87 | -------------------------------------------------------------------------------- /serverless.yml: -------------------------------------------------------------------------------- 1 | org: serverless-v2ex 2 | app: serverless-v2ex 3 | stage: dev 4 | component: nextjs 5 | name: serverless-v2ex 6 | 7 | inputs: 8 | src: 9 | dist: ./ 10 | hook: npm run build:sls 11 | exclude: 12 | - .env 13 | - '.git/**' 14 | - 'docs/**' 15 | - '.next/cache/**' 16 | - 'node_modules/**' 17 | region: ${env:REGION} 18 | runtime: Nodejs12.16 19 | functionName: ${name} 20 | layers: 21 | - name: ${output:${stage}:${app}:${name}-layer.name} 22 | version: ${output:${stage}:${app}:${name}-layer.version} 23 | functionConf: 24 | timeout: 10 25 | environment: 26 | variables: 27 | NODE_ENV: production 28 | SERVERLESS: true 29 | apigatewayConf: 30 | protocols: 31 | - http 32 | - https 33 | environment: release 34 | enableCORS: true 35 | function: 36 | functionQualifier: $DEFAULT 37 | customDomains: 38 | - domain: ${env:APIGW_CUSTOM_DOMAIN} 39 | certificateId: ${env:APIGW_CUSTOM_DOMAIN_CERTID} 40 | isDefaultMapping: false 41 | pathMappingSet: 42 | - path: / 43 | environment: release 44 | protocols: 45 | - http 46 | - https 47 | staticConf: 48 | cosConf: 49 | bucket: ${env:BUCKET} 50 | cdnConf: 51 | # First deployment, plz set onlyRefresh to false !!!! 52 | # after you deploy CDN once, just set onlyRefresh to true for refresh CDN cache 53 | onlyRefresh: true 54 | domain: ${env:CDN_DOMAIN} 55 | https: 56 | certId: ${env:CDN_DOMAIN_CERTID} 57 | -------------------------------------------------------------------------------- /sls.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = 'production'; 2 | process.env.SERVERLESS = true; 3 | 4 | const createServer = require('./dist'); 5 | 6 | module.exports = createServer; 7 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "alwaysStrict": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "preserve", 9 | "lib": ["dom", "es2017"], 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "noEmit": true, 13 | "noFallthroughCasesInSwitch": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "resolveJsonModule": true, 17 | "skipLibCheck": true, 18 | "strict": true, 19 | "target": "esnext", 20 | "baseUrl": ".", 21 | "paths": { 22 | "@assets": ["assets"], 23 | } 24 | }, 25 | "exclude": [ 26 | "node_modules", 27 | "dist", 28 | ".next", 29 | "out", 30 | "next.config.js", 31 | ".babelrc", 32 | "bundles", 33 | "coverage", 34 | "test/*" 35 | ], 36 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] 37 | } 38 | -------------------------------------------------------------------------------- /tsconfig.server.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "dist", 6 | "target": "es2017", 7 | "isolatedModules": false, 8 | "noEmit": false 9 | }, 10 | "include": ["server/**/*.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /utils/index.ts: -------------------------------------------------------------------------------- 1 | function pluralize(time: number, label: string) { 2 | return time + label; 3 | } 4 | 5 | function formatDate(time: number) { 6 | const between = Math.round(new Date().getTime() / 100) - time; 7 | if (between < 3600) { 8 | return pluralize(~~(between / 60), '分钟前'); 9 | } else if (between < 86400) { 10 | return pluralize(~~(between / 3600), '小时前'); 11 | } else { 12 | return pluralize(~~(between / 86400), '天前'); 13 | } 14 | } 15 | 16 | export const typeOf = (obj: any) => { 17 | return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); 18 | }; 19 | 20 | export const isObject = (obj: any) => { 21 | return typeOf(obj) === 'object'; 22 | }; 23 | 24 | export const param = function (a: any) { 25 | const s: any[] = []; 26 | const add = function (k: any, v: any) { 27 | v = typeof v === 'function' ? v() : v; 28 | v = v === null ? '' : v === undefined ? '' : v; 29 | s[s.length] = encodeURIComponent(k) + '=' + encodeURIComponent(v); 30 | }; 31 | const buildParams = function (prefix: string, obj: any) { 32 | if (prefix) { 33 | if (Array.isArray(obj)) { 34 | for (let i = 0, len = obj.length; i < len; i++) { 35 | buildParams( 36 | prefix + 37 | '[' + 38 | (typeof obj[i] === 'object' && obj[i] ? i : '') + 39 | ']', 40 | obj[i], 41 | ); 42 | } 43 | } else if (String(obj) === '[object Object]') { 44 | for (let key in obj) { 45 | buildParams(prefix + '[' + key + ']', obj[key]); 46 | } 47 | } else { 48 | add(prefix, obj); 49 | } 50 | } else if (Array.isArray(obj)) { 51 | for (let i = 0, len = obj.length; i < len; i++) { 52 | add(obj[i].name, obj[i].value); 53 | } 54 | } else { 55 | for (let key in obj) { 56 | buildParams(key, obj[key]); 57 | } 58 | } 59 | return s; 60 | }; 61 | 62 | return buildParams('', a).join('&'); 63 | }; 64 | 65 | export { formatDate }; 66 | -------------------------------------------------------------------------------- /utils/request.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | import * as utils from './index'; 3 | 4 | export const post = async (options: any, data?: any): Promise => { 5 | if (typeof options == 'string') { 6 | options = { 7 | url: options, 8 | }; 9 | } 10 | if (utils.isObject(data)) { 11 | options.data = data; 12 | } 13 | const res = await axios.request({ 14 | header: { 15 | 'Content-Type': 'application/x-www-form-urlencoded', 16 | Accept: 'application/json', 17 | }, 18 | ...options, 19 | data: utils.param(options.data), 20 | method: 'post', 21 | }); 22 | return res.data; 23 | }; 24 | 25 | export const get = async (options: any, data?: any): Promise => { 26 | if (typeof options == 'string') { 27 | options = { 28 | url: options, 29 | }; 30 | } 31 | if (utils.isObject(data)) { 32 | options.data = data; 33 | } 34 | const res = await axios.get(options.url, { 35 | ...options, 36 | params: options.data, 37 | }); 38 | return res.data; 39 | }; 40 | --------------------------------------------------------------------------------