Skip to content

Commit 2a1019d

Browse files
author
jeek
committed
feat: add next deploy
1 parent 5e5776a commit 2a1019d

File tree

2 files changed

+230
-5
lines changed

2 files changed

+230
-5
lines changed

‎docs/frontEnd/VAR/React/React-Next.md

+160-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,171 @@
11
---
2-
title: React Next
3-
date: 2020-10-17
2+
title: React Next docker部署
3+
date: 2023-12-06
44
sidebar: auto
55
categories:
66
- React
77
- 前端
88
tags:
99
- JS
1010
- React
11-
- 服务端渲染
11+
- ssr
12+
1213
---
14+
## next.config.js配置：
15+
```js
16+
const nextConfig = {
17+
output: 'standalone'
18+
// ...
19+
}
20+
```
21+
## docker部署
22+
```dockerfile
23+
FROM node:18-alpine AS base
24+
25+
# Install dependencies only when needed
26+
FROM base AS deps
27+
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
28+
RUN apk add --no-cache libc6-compat
29+
WORKDIR /app
30+
31+
# Install dependencies based on the preferred package manager
32+
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
33+
RUN \
34+
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
35+
elif [ -f package-lock.json ]; then npm ci; \
36+
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
37+
else echo "Lockfile not found." && exit 1; \
38+
fi
39+
40+
41+
# Rebuild the source code only when needed
42+
FROM base AS builder
43+
WORKDIR /app
44+
COPY --from=deps /app/node_modules ./node_modules
45+
COPY . .
46+
47+
# Next.js collects completely anonymous telemetry data about general usage.
48+
# Learn more here: https://nextjs.org/telemetry
49+
# Uncomment the following line in case you want to disable telemetry during the build.
50+
# ENV NEXT_TELEMETRY_DISABLED 1
51+
52+
RUN npm run build
53+
54+
# Production image, copy all the files and run next
55+
FROM base AS runner
56+
WORKDIR /app
57+
58+
ENV NODE_ENV production
59+
# Uncomment the following line in case you want to disable telemetry during runtime.
60+
# ENV NEXT_TELEMETRY_DISABLED 1
61+
62+
COPY --from=builder /app/public ./public
63+
64+
# Set the correct permission for prerender cache
65+
RUN addgroup -g 1001 -S nodejs
66+
RUN adduser -S nextjs -u 1001
67+
68+
# Automatically leverage output traces to reduce image size
69+
# https://nextjs.org/docs/advanced-features/output-file-tracing
70+
# 只有在standalone模式下build才会生成standalone文件夹
71+
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
72+
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
73+
74+
USER nextjs
75+
76+
EXPOSE 8080
77+
78+
ENV PORT 8080
79+
# set hostname to localhost
80+
ENV HOSTNAME "0.0.0.0"
81+
82+
# server.js is created by next build from the standalone output
83+
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
84+
CMD ["node", "server.js"]
85+
```
86+
87+
88+
## docker使用pm2：
89+
根目录下新增`ecosystem.config.js`:
90+
```js
91+
module.exports = {
92+
apps: [
93+
{
94+
name: 'next-docker-pm2',
95+
exec_mode: 'cluster',
96+
instances: 'max',
97+
script: "server.js", // 启动脚本
98+
},
99+
],
100+
}
101+
102+
```
103+
修改`dockerfile`：
104+
```dockerfile
105+
FROM node:18-alpine AS base
106+
107+
# Install dependencies only when needed
108+
FROM base AS deps
109+
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
110+
RUN apk add --no-cache libc6-compat
111+
WORKDIR /app
112+
113+
# Install dependencies based on the preferred package manager
114+
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
115+
RUN \
116+
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
117+
elif [ -f package-lock.json ]; then npm ci; \
118+
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
119+
else echo "Lockfile not found." && exit 1; \
120+
fi
121+
122+
123+
# Rebuild the source code only when needed
124+
FROM base AS builder
125+
WORKDIR /app
126+
COPY --from=deps /app/node_modules ./node_modules
127+
COPY . .
128+
129+
# Next.js collects completely anonymous telemetry data about general usage.
130+
# Learn more here: https://nextjs.org/telemetry
131+
# Uncomment the following line in case you want to disable telemetry during the build.
132+
# ENV NEXT_TELEMETRY_DISABLED 1
133+
134+
RUN npm run build
135+
136+
# Production image, copy all the files and run next
137+
FROM base AS runner
138+
WORKDIR /app
139+
140+
ENV NODE_ENV production
141+
# Uncomment the following line in case you want to disable telemetry during runtime.
142+
# ENV NEXT_TELEMETRY_DISABLED 1
143+
144+
COPY --from=builder /app/public ./public
145+
146+
# Set the correct permission for prerender cache
147+
RUN addgroup -g 1001 -S nodejs
148+
RUN adduser -S nextjs -u 1001
149+
150+
# Automatically leverage output traces to reduce image size
151+
# https://nextjs.org/docs/advanced-features/output-file-tracing
152+
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
153+
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
154+
155+
# pm2
156+
COPY --from=builder --chown=nextjs:nodejs /app/ecosystem.config.js ./
157+
RUN npm install -g pm2
158+
159+
USER nextjs
160+
161+
EXPOSE 8080
13162

14-
<iframe importance="low" height="600" width="100%;" scrolling="no" title="react lifecycle" src="https://nextjs.frontendx.cn/" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
163+
ENV PORT 8080
164+
# set hostname to localhost
165+
ENV HOSTNAME "0.0.0.0"
15166

16-
[如果加载失败CLICK ME](https://nextjs.frontendx.cn/)
167+
# server.js is created by next build from the standalone output
168+
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
169+
# Launch app with PM2
170+
CMD ["pm2-runtime", "ecosystem.config.js"]
171+
```

‎docs/translate/browser-fingerprinting.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# [译]html5中应用canvas进行浏览器指纹识别
2+
3+
4+
## 摘要
5+
将浏览器与操作系统功能和系统硬件更紧密地结合意味着网站可以更多地访问这些资源，并且浏览器行为会根据这些资源的行为而变化。
6+
7+
我们提出了一个新的系统指纹，灵感来自以上观察：将文本和WebGL场景渲染到`<canvas>`元素，然后检查生成的像素。新的指纹是一致的，高熵的，与其他指纹正交，对用户透明，并且容易获取。
8+
<details>
9+
<summary>原文</summary>
10+
Tying the browser more closely to operating system functionality and system hardware means that websites have more access to these resources, and that browser behavior varies depending on the behavior of these resources.
11+
12+
We propose a new system fingerprint, inspired by the observation above: render text and WebGL scenes to a < canvas > element, then examine the pixels produced. The new fingerprint is consistent, high-entropy, orthogonal to other fingerprints, transparent to the user, and readily obtainable.
13+
</details>
14+
15+
## 1.介绍
16+
浏览器正变得越来越复杂，成为了功能更加丰富的应用程序平台，承担了传统操作系统提供的更多功能。这种增加的复杂性很大程度上是由 HTML5 规范套件推动的，其中包括对程序化绘图表面（`<canvas>`）、三维图形（`WebGL`）、结构化客户端数据存储、地理位置服务、操纵浏览器历史和浏览器缓存、音频和视频播放等功能的支持。
17+
<details>
18+
<summary>原文</summary>
19+
Browsers are becoming increasingly sophisticated application platforms, taking on more of the functionality traditionally provided by an operating system. Much of this increasing sophistication is driven by the HTML5 suite of specifications, which make provisions for a programmatic drawing surface (< canvas >), three-dimensional graphics (WebGL), a structured client-side datastore, geolocation services, the ability to manipulate browser history and the browser cache, audio and video playback, and more.
20+
</details>
21+
22+
浏览器实现这些功能的自然方式是利用主机操作系统和硬件。使用 GPU 进行 3D 图形（甚至 2D 图形合成<sup>1</sup>）可以显著提高性能，同时节省移动设备的电池。而使用操作系统的字体渲染代码来显示文本意味着浏览器会自动以符合显示效果并符合用户期望的方式显示文本。<sup>2</sup>
23+
<details>
24+
<summary>原文</summary>
25+
The natural way for browsers to implement such features is to draw on the host operating system and hardware. Using the GPU for 3D graphics (and even for 2D graphics compositing<sup>1</sup>) provides substantial performance improvements, as well as battery savings on mobile devices. And using the operating system’s font-rendering code for text means that browsers automatically display text in a way that is optimized for the display and consistent with the user’s expectations.<sup>2</sup>
26+
</details>
27+
28+
<details>
29+
<summary>原文</summary>
30+
This paper proceeds from the following simple observation: Tying the browser more closely to operating system functionality and system hardware means that websites have more access to these resources, and that browser behavior varies depending on the behavior of these resources. The first part of this observation has security implications: codebases not designed to handle adversarial input can now be exposed to it.<sup>3</sup> The second part of the observation, which we focus on, has privacy implications: different behavior can be used to distinguish systems, and thereby fingerprint the people using them.
31+
</details>
32+
33+
<details>
34+
<summary>原文</summary>
35+
Our results.
36+
37+
We exhibit a new system fingerprint based on browser font and WebGL rendering. To obtain this fingerprint, a website renders text and WebGL scenes to a `<canvas>` element, then examines the pixels produced. Different systems produce different output, and therefore different fingerprints. Even very simple tests— such as rendering a single sentence in a widely distributed system font— produce surprising variation. The new fingerprint has several desirable properties:
38+
39+
<ul>
40+
<li>It is consistent. In our experiments, we obtain pixel-identical results in independent trials from the same user.</li>
41+
<li>It is high-entropy. In 294 experiments on Amazon’s
42+
Mechanical Turk, we observed 116 unique fingerprint
43+
values, for a sample entropy of 5.73 bits. This is so
44+
even though the user population in our experiments
45+
exhibits little variation in browser and OS.</li>
46+
<li>It is orthogonal to other fingerprints. Our fingerprint
47+
measures graphics driver and GPU model, which is independent of other possible fingerprints discussed below.</li>
48+
<li>It is transparent to the user. Our tests can be performed, offscreen, in a fraction of a second. There is
49+
no indication, visual or otherwise, that the user’s system is being fingerprinted.
50+
</li>
51+
<li>It is readily obtainable. Any website that runs JavaScript on the user’s browser can fingerprint its rendering behavior; no access is needed besides what is
52+
provided by the usual web attacker model.</li>
53+
</ul>
54+
</details>
55+
56+
<details>
57+
<summary>原文</summary>
58+
Our fingerprint can be used as a black box or as a white
59+
box. A website could render tests to a `<canvas>`, extract the
60+
resulting pixmap, then use a cryptographic hash to obtain
61+
a short, convenient fingerprint. Because the fingerprint is
62+
consistent, the pixmap (and therefore its hash) will be identical in multiple runs on one machine, but take on different
63+
values depending on hardware and software configuration.
64+
This is a black-box use of the fingerprint, since it extracts to attackers by the WebFont specification, was patched to fix
65+
an exploitable parsing vulnerability as recently as December
66+
of last year [13, 4].
67+
68+
</details>
69+
70+
> [Pixel Perfect: Fingerprinting Canvas in HTML5](https://hovav.net/ucsd/dist/canvas.pdf)

0 commit comments

Comments
 (0)