ã¢ããªã±ãŒã·ã§ã³ãNext8ããNext9ã«ç§»åããŸãã
next build
ãå®è¡ãããšãããã»ã¹ã®ã¡ã¢ãªãäžè¶³ããã¢ããªã±ãŒã·ã§ã³ããã«ãã§ããªããªããŸãã
åèãŸã§ã«ãããã¯å€ããå°ãªãã20ã®ã«ãŒããæã€ã¢ããªã±ãŒã·ã§ã³ã§ãã
äœãæªãã£ãã®ãããããªãã®ã§ãåçŸããã®ã¯é£ããã§ãã Next 8ã¯åé¡ãªãã³ã³ãã€ã«ãããŸãããNext9ã¯ã³ã³ãã€ã«ãããŸããã
ãããã¹ã¿ãã¯ãã¬ãŒã¹ã§ãã ãã説æçãªåºåãååŸããæ¹æ³ããåç¥ã®å Žåã¯ããç¥ãããã ããã以äžãæäŸããŸãã
<--- Last few GCs --->
[28143:0x102634000] 231190 ms: Mark-sweep 1278.7 (1441.0) -> 1263.4 (1438.5) MB, 838.4 / 0.0 ms (average mu = 0.290, current mu = 0.268) allocation failure scavenge might not succeed
[28143:0x102634000] 231308 ms: Scavenge 1278.1 (1438.5) -> 1266.6 (1440.0) MB, 8.2 / 0.0 ms (average mu = 0.290, current mu = 0.268) allocation failure
[28143:0x102634000] 231365 ms: Scavenge 1279.3 (1440.0) -> 1271.6 (1443.0) MB, 21.6 / 0.0 ms (average mu = 0.290, current mu = 0.268) allocation failure
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 0x3547db9dbe3d]
Security context: 0x3a36ebf9e6e1 <JSObject>
1: DoJoin(aka DoJoin) [0x3a36ebf85e89] [native array.js:~87] [pc=0x3547dcd9a7d0](this=0x3a366f3826f1 <undefined>,l=0x3a368f6eb2b9 <JSArray[10]>,m=10,A=0x3a366f3828c9 <true>,w=0x3a36c3aafc69 <String[1]: />,v=0x3a366f3829a1 <false>)
2: Join(aka Join) [0x3a36ebf85ed9] [native array.js:~112] [pc=0x3547dd85bb38](this=0x3a366f3826f1 <undefined>,l=0x3a368f6...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x10003ae75 node::Abort() [/usr/local/bin/node]
2: 0x10003b07f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
3: 0x1001a7ae5 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
4: 0x100572ef2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
5: 0x1005759c5 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
6: 0x10057186f v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
7: 0x10056fa44 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
8: 0x10057c2dc v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
9: 0x10057c35f v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x10054e1e4 v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/usr/local/bin/node]
11: 0x10082784d v8::internal::Runtime_StringBuilderJoin(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x3547db9dbe3d
[1] 28142 abort npm run build:next
æ§ç¯ããå¿ èŠããããŸã
該åœããå Žåã¯ãåé¡ã®èª¬æã«åœ¹ç«ã€ã¹ã¯ãªãŒã³ã·ã§ãããè¿œå ããŠãã ããã
ããã«åé¡ã«é¢ããä»ã®ã³ã³ããã¹ããè¿œå ããŸãã
è€è£œãªãã§ããã远跡ããããšã¯äžå¯èœã§ãã
ãããç§ã¯ç¥ã£ãŠããŸãã ãœãŒã¹ãããã®çæã®åšãã«ã¡ã¢ãªããŒããååŸããåã«ããããåé€ããŸããã ãããŠããã€ãã£ãé åãã¡ã€ã«ã«é¢ãããã®ãšã©ãŒã¡ãã»ãŒãžã衚瀺ãããŸããã
ãã詳现ãªã¹ã¿ãã¯ãã¬ãŒã¹ãååŸããæ¹æ³ã¯ãããŸããïŒ
åèãŸã§ã«ãçŸåšãã«ãäžã§ãããããŒãããã»ã¹ã«ã¡ã¢ãªãè¿œå ããããã§ãã
NODE_OPTIONS="--max_old_space_size=4096"
æ倧28ã®ã«ãŒããæ§ç¯ããŸããã30ã®ã«ãŒãïŒ31ã®ã«ãŒãããããŸãïŒãæå®ãããšãããã»ã¹ã®ã¡ã¢ãªã¯æ倧3GBïŒããã³ãã以äžïŒã«ãªããŸãã ç§ã¯8GBã®ã¡ã¢ãªãæèŒããå¹³åçãªã©ãããããã§ãã«ãããã»ã¹ãå®è¡ããŠããŸããããã®äžéšã¯ãã§ã«äœ¿çšãããŠããŸãã ããããããã¯ãªããšãããŸããã
ãã®åé¡ãéãããŸãŸã«ããŠããã¹ããã©ããããããŸããã
ããã圹ç«ã€å Žåã¯ãããã«æ§ç¯ãããããŒãžã®çµ±èšããããŸãïŒ
ãœãŒã¹ããããäœæããããšãããšïŒã»ãšãã©ã®å ŽåïŒãããã»ã¹ãã¯ã©ãã·ã¥ããŸãã
æ¬åœã«ç§ãã¡ãç¥ãå¯äžã®æ¹æ³ã¯ãå®å šãªè€è£œãæäŸãããŠãããã©ããã§ãã ãšãããããããéããŸãã
Next 9ã«ã¢ããã°ã¬ãŒãããåŸãã¡ã¢ãªäžè¶³ãšã©ãŒãçºçããŠããã®ã«å¯ŸããNext8ã§ã¯ããã¯åé¡ã§ã¯ãªãã£ãããšã«ãæ°ã¥ããŸããã
ãã®å ŽåãCIãããŒã®äžéšãšããŠCircleCiã§ã¢ããªãæ§ç¯ããŠããã次ã®åé¡ãçºçããŠããŸãã
Exited with code 137
Hint: Exit code 137 typically means the process is killed because it was running out of memory
Hint: Check if you can optimize the memory usage in your app
Hint: Max memory usage of this container is 4284268544
according to /sys/fs/cgroup/memory/memory.max_usage_in_bytes
4GBã¯CircleCIã³ã³ããã®ã¡ã¢ãªå¶éã§ããããããšã©ãŒãçºçããŸãã Next 9ã§æ§ç¯ããŠããããã§ããã®éçã«éããŠããŸãã
çŸæç¹ã§ã¯ãåçŸå¯èœãªã±ãŒã¹ãå ±æããããšã¯ã§ããŸããã
NextJs 9ã䜿çšããŠã¢ããªã±ãŒã·ã§ã³ããããã€ãããšãã«ãããã®åé¡ã«çŽé¢ããŸããã
NextJs 9ã«ã¢ããã°ã¬ãŒããã3ã€ã®ãããžã§ã¯ãã®ãã¡ã2ã€ã¯ElasticBeanstalkã«ãããã€ãããšãã«RAMã®äœ¿çšäžã®åé¡ã«çŽé¢ããŠããŸãã æçµçã«ã¯å ã«æ»ãå¿ èŠããããŸãã æ®å¿µãªãããåé¡ãåçŸããããã«å ±æãããªããžããªããããŸããã
åãã¡ã¢ãªäžè¶³ã®åé¡ãçºçããŠããŸããããã¹ãŠã®ã©ã ãããã«ããããåŸã«çºçããŸãã ã©ãããããã§ãã«ããå®äºããããšã¯ã§ããŸããããããã€æã«ã¯ã©ãã·ã¥ããŸãããããŒã«ã«ã§ã®éçºäžã«å®æçã«ã¡ã¢ãªäžè¶³ã®åé¡ãããã€ãçºçããŸãã ïŒç§ã«ãšã£ãŠïŒèªèã§ããå¯äžã®ãã®ã¯ãã®è¡ã§ãïŒ
readFile [/tmp/b0cc21aa63cece4e/.build-utils/.builder/node_modules/@now/next/dist/index.js:9555]
ããããã°ã§ã...
Aug 22 2019 01:26:51:346 | λ (Lambda) page was emitted as a lambda (i.e. getInitialProps)
-- | --
Aug 22 2019 01:26:51:346 | â¡ (Static File) page was prerendered as static HTML
Aug 22 2019 01:26:51:434 | Done in 146.48s.
Aug 22 2019 01:26:51:444 | preparing lambda files...
Aug 22 2019 01:34:22:983 | <--- Last few GCs --->
Aug 22 2019 01:34:22:983 | [430:0x23f5310] 666594 ms: Mark-sweep 4089.3 (4262.1) -> 4089.3 (4261.1) MB, 3898.4 / 0.0 ms allocation failure GC in old space requested
Aug 22 2019 01:34:22:983 | [430:0x23f5310] 671097 ms: Mark-sweep 4089.3 (4261.1) -> 4089.3 (4225.6) MB, 4502.8 / 0.0 ms last resort GC in old space requested
Aug 22 2019 01:34:22:983 | [430:0x23f5310] 674990 ms: Mark-sweep 4089.3 (4225.6) -> 4089.3 (4223.1) MB, 3892.4 / 0.0 ms last resort GC in old space requested
Aug 22 2019 01:34:22:983 | <--- JS stacktrace --->
Aug 22 2019 01:34:22:983 | ==== JS stack trace =========================================
Aug 22 2019 01:34:22:983 | Security context: 0x70e9f6257c1 <JSObject>
Aug 22 2019 01:34:22:983 | 1: toString [buffer.js:611] [bytecode=0x2833662c6061 offset=31](this=0xce2ca70dbc1 <Uint8Array map = 0x6cc06836709>,encoding=0x2fb750b822d1 <undefined>,start=0x2fb750b822d1 <undefined>,end=0x2fb750b822d1 <undefined>)
Aug 22 2019 01:34:22:983 | 2: arguments adaptor frame: 0->3
Aug 22 2019 01:34:22:983 | 3: readFile [/tmp/b0cc21aa63cece4e/.build-utils/.builder/node_modules/@now/next/dist/index.js:9555] [bytecode=0x1814135ff3e1 offset=53](t...
Aug 22 2019 01:34:22:983 | FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
Aug 22 2019 01:34:22:983 | 1:
Aug 22 2019 01:34:22:984 | node::Abort() [/node8/bin/node]
Aug 22 2019 01:34:22:984 | 2:
Aug 22 2019 01:34:22:986 | 0x11e73ec [/node8/bin/node]
Aug 22 2019 01:34:22:986 | 3:
Aug 22 2019 01:34:22:986 | v8::Utils::ReportOOMFailure(char const*, bool) [/node8/bin/node]
Aug 22 2019 01:34:22:986 | 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/node8/bin/node]
Aug 22 2019 01:34:22:986 | 5: v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [/node8/bin/node]
Aug 22 2019 01:34:22:986 | 6:
Aug 22 2019 01:34:22:986 | v8::internal::Factory::NewStringFromUtf8(v8::internal::Vector<char const>, v8::internal::PretenureFlag) [/node8/bin/node]
Aug 22 2019 01:34:22:986 | 7:
Aug 22 2019 01:34:22:987 | v8::String::NewFromUtf8(v8::Isolate*, char const*, v8::NewStringType, int) [/node8/bin/node]
Aug 22 2019 01:34:22:987 | 8:
Aug 22 2019 01:34:22:987 | node::StringBytes::Encode(v8::Isolate*, char const*, unsigned long, node::encoding, v8::Local<v8::Value>*) [/node8/bin/node]
Aug 22 2019 01:34:22:987 | 9:
Aug 22 2019 01:34:22:988 | 0x12070d6 [/node8/bin/node]
Aug 22 2019 01:34:22:988 | 10:
Aug 22 2019 01:34:22:988 | v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) [/node8/bin/node]
Aug 22 2019 01:34:22:988 | 11:
Aug 22 2019 01:34:22:989 | 0xb79dac [/node8/bin/node]
Aug 22 2019 01:34:22:989 | 12:
Aug 22 2019 01:34:22:989 | v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*) [/node8/bin/node]
Aug 22 2019 01:34:22:989 | 13: 0x47a70c842fd
Aug 22 2019 01:35:32:549 | done
ãããç§ã®webpackèšå®ã§ãïŒ
const loadConfig = require('./loadConfig');
const reNodeModules = /node_modules/;
const reScript = /\.(js|jsx|mjs)$/;
const reImage = /\.(bmp|gif|jpg|jpeg|png|svg)$/;
const reGraphql = /\.graphql?$/;
const reStyle = /\.(css|less|styl|scss|sass|sss)$/;
module.exports = (nextConfig = {}) => {
return {
...nextConfig,
webpack(config, options) {
const { webpack, isServer, dev } = options;
const staticAssetName = dev ? '[path][name].[ext]?[hash:8]' : '[name]-[hash:8].[ext]';
const publicPath = '/_next/static/';
const outputPath = `${isServer ? '../' : ''}static/`;
// eslint-disable-next-line no-param-reassign
config.resolve = {
...config.resolve,
modules: [...config.resolve.modules, './src'],
};
config.module.rules.push(
{
test: reImage,
exclude: reNodeModules,
oneOf: [
// Inline lightweight into CSS
{
issuer: reStyle,
oneOf: [
// Inline lightweight SVGs as UTF-8 encoded DataUrl string
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
name: staticAssetName,
limit: 4096, // 4kb
publicPath,
outputPath,
},
},
// Inline lightweight as Base64 encoded DataUrl string
{
loader: 'url-loader',
options: {
name: staticAssetName,
limit: 4096, // 4kb
publicPath,
outputPath,
},
},
],
},
// Or return public URL to image resource
{
loader: 'file-loader',
options: {
name: staticAssetName,
publicPath,
outputPath,
},
},
],
}, // Rules for GraphQL
{
test: reGraphql,
exclude: reNodeModules,
use: [
{
loader: 'webpack-graphql-loader',
options: {
removeUnusedFragments: true,
output: 'document',
},
},
],
},
{
exclude: [reNodeModules, reScript, reImage, reGraphql, /\.json$/, /\.txt$/, /\.md$/],
loader: 'file-loader',
options: {
name: staticAssetName,
publicPath,
outputPath,
},
},
);
const appConfig = loadConfig();
if (isServer && dev) {
console.info(appConfig);
}
config.plugins.push(
new webpack.DefinePlugin({
__DEV__: dev,
__SERVER__: isServer,
__BROWSER__: !isServer,
__CONFIG__: JSON.stringify(appConfig),
}),
);
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
}
return config;
},
};
};
@timneutkens Next.js9ã䜿çšããŠã¡ã¢ãªãäžè¶³ããŠããŸãã ã³ã³ãã€ã«ããŠããã³ã³ããŒãã³ãã®æ°ãåå ã§ããå¯èœæ§ããããŸãã ããªãã¯ããã®å®å
šãªåçŸãå¿
èŠã ãšèšããŸããã ããªãã¯ç§ã®æ¯åºãèŠãããšãã§ããŸãã
https://github.com/stramel/styled-icons/tree/ms/add-material-variants
倱æãããã«ãã¯æ¬¡ã®ãšããã§ãïŒ https ïŒ
Travisã«ã¯NODE_OPTIONS=--max-old-space-size=4096
èšå®ãããŠããŸã
@timneutkensã¯ãã¬ããæã£ãŠããã®ã§ãåé¡ãåéããŠãã ããã
[email protected]ã§ãåãåé¡ã«
ãããã®ã¢ããªã±ãŒã·ã§ã³ã¯ãåã«ãµã€ãºã®éçã«éããŠã¡ã¢ãªäžè¶³ã«ãªãå§ãããšæããŸãã NODE_OPTIONS=--max-old-space-size=4096
ä»ããŠãããå€ãã®ãã«ããå®è¡ããå¿
èŠããããŸãã
ãŸãã¯ãæ°ãããã£ã³ã¯æ©èœãæå¹ã«ããããšãã§ããŸãã
// next.config.js
module.exports = {
experimental: { granularChunks: true }
}
@Timerã«æè¬ããŸãã granularChunks
æ©èœãè©ŠããŠã¿ãŸãã
ãŸãã念ã®ããã«èšã£ãŠãããŸãããããŒã«ã«ãã·ã³ã®å€ãšããŠ8192ãè©ŠããŸããããããã§ã倱æããŸããã å®éã«æ§ç¯ããããã«å¿ èŠãªã¡ã¢ãªéãæ³åããã®ã¯å°ãæãã§ãã
å€ãåé¡ã調ã¹ããšãããæ°ããã¡ãžã£ãŒãªãªãŒã¹ããã£ããšãã«ããã®ã¡ã¢ãªã®åé¡ã«çŽé¢ãã人ãããããšã«æ°ã¥ããŸããã 倧ããªãããžã§ã¯ãã§ã¡ã¢ãªãã¹ããããŸããïŒ
ãã®æ°ããã¡ãžã£ãŒãªãªãŒã¹ã¯ãããŒãã®ã¡ã¢ãªäžéã«éããŠããŸãã 以åã¯ãªãã£ããã®å€§éã®ã¡ã¢ãªã®åå ã¯äœã§ããïŒ
@Timer granularChunks
æ©èœã䜿çšããããšããŸããããããã§ãåãåé¡ãçºçããŸããã ããŒã«ã«ã§ã8192ã»ããã
ããã«ã¯ãã°ã©ãã¥ã©ãŒãã£ã³ã¯æ§ææ©èœã»ããhttps://github.com/stramel/styled-icons/tree/ms/granular-chunksããããŸã
ã³ã³ããŒãã³ããåçã«ãã«ããããã«åãæ¿ããŸããã httpsïŒ//github.com/stramel/styled-icons/tree/ms/dynamic-import-granular-chunks
ãã®åé¡ã¯ããããã¡ã€ãå®è¡ããããã«ãã«ããå€æŽãããšãã«ãªããžããªã®1ã€ã§çºçããŸããããã¯ãçŸåšããã©ã«ãã§ç¡å¹ã«ãªã£ãŠããŸãã
æŽæ°ïŒã³ãŒãããŒã¹ã§åé¡ãwithSourceMaps
ãã©ã°ã€ã³ã䜿çšããŠãããšå€æããŸããïŒ
"@zeit/next-source-maps": "^0.0.4-canary.1"
éåžžã«é
ãhidden-source-map
ã«èšå®ããŠããã®ã§ãããã¯çã«ããªã£ãŠããŸãã ãã ããNextJS8ãããææ°é¢æ°çã«é
ãçç±ã¯ããããŸããã
ãŸããv9ã«ã¢ããã°ã¬ãŒãããåŸãããã©ãŒãã³ã¹ã®å€§ããªåé¡ã«æ°ã¥ããŸãã... 2015 macbook proã䜿çšããŠããŸãããããŸã§é ããããšã¯ãªããããªãéãããã°ã©ã ãå®è¡ããŸãããã次ã®ã¢ããªãããŒã«ã«ã§å®è¡ãããã³ã«ããã¯å®å šã«é ãããã¹ãŠãå€§å¹ ã«é ããªããŸãã
ç§ã¯éåžž10åããšã«ã¢ããªãåèµ·åããå¿
èŠããããŸããä»æ¥ã¯ç§ãé 匵ã£ãŠãããããéããããšããæåã®æ¥ã§ããããããŠéçºç§»åã§æ°æéå®è¡ããåŸãç§ã¯äººã
ãšåãJavaScript heap out of memory
ãæã«å
¥ããŸãã次ã®ãã«ãã®å®è¡ããå ±åãããŸããã ããã®ã©ããã«ã¡ã¢ãªãªãŒã¯ãããã¯ãã§ã
ç§ãããæããŸãã ç§ã®ååã¯æè¿ã®MacBookãæã£ãŠããŠã次ã®9ã«ã¢ããã°ã¬ãŒãããŠãããéçºãµãŒããŒã®åã³ã³ãã€ã«ãé ããªããŸããã æã ããã¯20ç§ãããã
32GBã®ç©çã¡ã¢ãªMacBookProã§NODE_OPTIONS = 16384ãèšå®ããããšããŠããåãåé¡ãçºçããŸãããå¹æã¯ãããŸããã
ãã°ãäžèŠ§è¡šç€ºãããŸãã
==== JS stack trace =========================================
0: ExitFrame [pc: 0x335bafb5be3d]
Security context: 0x0fe28be1e6e9 <JSObject>
1: createPrinter [0xfe25fe2c0b9] [/Users/my-name/my-project/node_modules/typescript/lib/typescript.js:~86713] [pc=0x335bb12e86f3](this=0x0fe280c03329 <Object map = 0xfe2df152cc9>,printerOptions=0x0fe2f39e8ae1 <Object map = 0xfe20ac205a9>,handlers=0x0fe28e1026f1 <undefined>)
2: arguments adaptor frame: 1->2
3: reportImplicitAny(aka reportImpli...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x10003d035 node::Abort() [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
2: 0x10003d23f node::OnFatalError(char const*, char const*) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
3: 0x1001b8e15 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
4: 0x100586d72 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
5: 0x100589845 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
6: 0x1005856ef v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
7: 0x1005838c4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
8: 0x10059015c v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
9: 0x1005901df v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
10: 0x10055fb24 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
11: 0x1007e7e04 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/opt/nvm/versions/node/v10.16.3/bin/node]
12: 0x335bafb5be3d
13: 0x335bb12e86f3
14: 0x335bafb0a5c3
@timneutkensã¯ããã®åé¡ã
å¥ã®èšŒäººãè¿œå ããŸãã
NextããŒãžã§ã³4.2.3ã§ã¢ããªãç¶æ¿ããŸããã
ãããžã§ã¯ãã®ããŒã«ã«ãµãŒããå®è¡ãããšã次ã®ãšã©ãŒã§å€±æããŸããã
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
倱æã¯éåžžãã¢ããªãèµ·åããŠãã10å以å
ã«çºçããã¢ããªã§ããå€ãã®ããã²ãŒã·ã§ã³ãããªã¬ãŒããããšã§æ©ããããšãã§ããŸãã
ããŒãžã§ã³8.1.0ã«æ»ããŸããããããæ¬æ Œçãªããã²ãŒã·ã§ã³ïŒãããã£ãŠããŒãžãã«ãïŒãè¡ã£ãŠããåã倱æãåçŸããããšã¯ã§ããŸããã
ããããããèŠãŠãã...
åéããæéã ãšæããŸã@timneutkens
éçºã¢ãŒãã§bootstrap.min.cssã®ã€ã³ããŒããéå§ããŠãããæšæ¥ãããreact-routerã«ã¹ã¿ã ãµãŒããŒã§[email protected]ã§ããã®åé¡ã«çŽé¢ããŠããŸãã
jsçµç±ã§require / importã䜿çšããŠbootstrap.min.cssãçŽæ¥ã€ã³ããŒãããå ŽåããŸãã¯css / scssçµç±ã§@importã䜿çšããå Žåã®äž¡æ¹ã 䜿çšããnodejsã¡ã¢ãªã¯ãéçºäžã«ããã€ãã®æºæ ãè¡ãããåŸãå¢å ããŸããã
ããããcdnããããŒãã¹ãã©ãããã€ã³ããŒããããšã ã«
next / headã䜿çšãããšãé·ãéçºæéã§å€ãã®ã³ã³ãã©ã€ã¢ã³ã¹ãå®è¡ããåŸã§ããã¡ã¢ãªã¯æ£åžžã«åäœããããã«èŠããŸãã<Head>
<meta key="viewport" name="viewport" content="initial-scale=1.0, width=device-width" />
<link key="bootstrapcdn" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" ... />
...
</Head>
ãããã£ãŠãåé¡ã¯next-cssã§ã®cssã®çž®å°ã«ãã£ããšæããŸãã ãããžã§ã¯ãã8.1.0ã«ããŠã³ã°ã¬ãŒããããšããã®çž®å°ã®åé¡ãçºçããããã§ãã https://github.com/zeit/next-plugins/issues/541ã ã ããç§ã¯ãã®åé¿çãè©ŠããŸããïŒhttps://github.com/zeit/next-plugins/issues/392#issuecomment-475845330ïŒã ãŸã ã¡ã¢ãªã®åé¡
// next.config.js
const withCSS = require('@zeit/next-css');
function HACK_removeMinimizeOptionFromCssLoaders(config) {
console.warn(
'HACK: Removing 'minimize' option from 'css-loader' entries in Webpack config',
);
config.module.rules.forEach(rule => {
if (Array.isArray(rule.use)) {
rule.use.forEach(u => {
if (u.loader === 'css-loader' && u.options) {
delete u.options.minimize;
}
});
}
});
}
module.exports = withCSS({
webpack(config) {
HACK_removeMinimizeOptionFromCssLoaders(config);
return config;
},
});
Next 9.1.3ã«ã¢ããã°ã¬ãŒãããåŸãåãåé¡ãçºçããŸãã ç§ãnext-cssã䜿çšããŠããŸããããããå®éã«ã¯ã©ãã·ã¥ããŠããã®ã§ããããïŒ
ããããã¹ãŠã®äººã«ãšã£ãŠåãã§ãããã©ããã¯å®å šã«ã¯ããããŸããããèŠæ±ããŠãããªãœãŒã¹ãå®éã«èŠã€ããããšã確èªããŠãã ããã ã¢ããªãèŠã€ããããªãã£ãç»åããããããŒããšã©ãŒãçºçãããŸã§ç»åãæ¢ãç¶ããŸããã ç§ã¯ãã®ç»åã®èšåãåé€ããŸããããããŠããã¯ç§ã«åã³ãšã©ãŒãäžããŸããã§ããã
ç§ããããä¿®æ£ããããšãã§ããŸããã
ç§ã®å Žåã /public/manifest.json
ã<head/>
meta
ã¿ã°ãšããŠ<head/>
ããã®ãªãœãŒã¹ããããžã§ã¯ãã«ååšããããããã¡ã¢ãªãªãŒã¯ã®åå ã§ããã
ç§ã¯ãã®ã³ãŒããæã£ãŠããŸãããã icon.png
ã¯ååšããŸãã
<Head>
<link rel="icon" href="/static/icon.png" type="image/png" />
</Head>
ãã¡ãã³ã³ã®ã€ã³ããŒããä¿®æ£ããããšã§ãã¡ã¢ãªãªãŒã¯ãšã©ãŒãçºçããªããªããŸãã
<Head>
<link rel="icon" href="/icon.png" type="image/png" />
</Head>
https://github.com/zeit/now/issues/3307ã§è¿°ã¹ãããã«ã static
/ public
ãã©ã«ããŒã§åé¡ãçºçããŠãããšæããŸãã
ç§ããã®åé¡ãæ±ããŠããŸããã ãããã·ã¿ãèšã£ãããã«ãç§ã¯éçãã©ã«ãã調ã¹ãŸããã public/static/
ãã©ã«ããŒããïŒãã¹ãç®çã§ïŒ674åã®jsonãã¡ã€ã«ã®ãã©ã«ããŒãåé€ããŸããã ãã以æ¥ãåé¡ã¯ãããŸããã§ããã
ãã®åé¡ã¯ããããã¡ã€ãå®è¡ããããã«ãã«ããå€æŽãããšãã«ãªããžããªã®1ã€ã§çºçããŸããããã¯ãçŸåšããã©ã«ãã§ç¡å¹ã«ãªã£ãŠããŸãã
æŽæ°ïŒã³ãŒãããŒã¹ã§åé¡ã
withSourceMaps
ãã©ã°ã€ã³ã䜿çšããŠãããšå€æããŸããïŒ
"@zeit/next-source-maps": "^0.0.4-canary.1"
éåžžã«é ã
hidden-source-map
ã«èšå®ããŠããã®ã§ãããã¯çã«ããªã£ãŠããŸãã ãã ããNextJS8ãããææ°é¢æ°çã«é ãçç±ã¯ããããŸããã
"@zeit/next-source-maps": "^0.0.4-canary.1"
ã«ã¢ããã°ã¬ãŒãããåŸãããã®åé¡ãçºçãå§ããŸããã 解決çã¯ãããŸããããããšããœãŒã¹ããããåé€ããå¿
èŠããããŸããïŒ
@focuxãœãŒã¹ãããããŸã£ããç¡å¹ã«ããå¿ èŠããããŸããã ãã®åŸãã¡ã¢ãªã®äœ¿çšéã¯å€§å¹ ã«æžå°ããŸãã
ããã§ãåãåé¡ããããŸãã ãã«ãã®ãã¡ã€ã«ãµã€ãºã倧ãããããšã¯ã©ãã·ã¥ããããã§ãã ããšãã°ãTypescriptããäœããã€ã³ããŒããããšããããã«ãã®ãã¡ã€ã«ãµã€ãºã2.41mbã«ãªããŸããã ãã®åŸã2GBã®RAMãæèŒããCIãã¯ã©ãã·ã¥ãå§ããŸããã Typescriptã€ã³ããŒããåé€ããåŸããã¡ã€ã«ãµã€ãºã¯100kbã«ââæžå°ããåã³æ©èœããŸããã
Nextjs 9ã¯ãæåããCIã§éåžžã«é ãã§ãã ãã«ãã«ã¯éåžžã«æéãããããç¹å¥ãªããŒãºã¯ãããŸãã...ãã åå¿ãããã®ããããªã¢ã«UIããã¡ãã¡ã®ããã±ãŒãžããããŸãã ç§ã¯ããŒã/ãšã¯ã¹ãã¬ã¹ãããã€ãã®ããããããã³ã¢ãphpãªã©ãšåãã¯ã©ã¹ã¿ãŒã«CIãæã£ãŠããŸãããããã¯ãã¹ãŠCIã«1GBã®ã¡ã¢ãªããããããªãé«éã«ãã«ããããŸãã ãã«ãããã»ã¹ã«ã€ããŠã®ç§ã®æ°æã¡ä»¥äžã«äœãåé¡ãããã®ãââããããŸãããïŒ
ããã§ãåãåé¡ããããŸãã Mac OS / Githubã¢ã¯ã·ã§ã³ã ããã«èšèŒãããŠããã¢ã¯ã·ã§ã³ã¯åœ¹ã«ç«ã¡ãŸããããªã³ã¯ãããŠãããååšããªããã¡ã€ã«ãèŠã€ããããšãã§ããŸããã
ãã ãããããžã§ã¯ãã¯Zeit Nowã§ãã«ããããŸãïŒãããŠæ¬çªç°å¢ã«ãããŸãïŒã
æ¹æ³ãç¥ã£ãŠããã°å©ãããã§ãã
ããã§ãåãåé¡ïŒMacOSïŒã ç§ãèŠã€ããã®ã¯ïŒ
æäŒã£ãŠãããããæããŠãã ããã ããã«ãšã©ãŒãã°ããããŸã...
<--- Last few GCs --->
[83442:0x102804000] 123060 ms: Scavenge 1371.3 (1422.4) -> 1370.7 (1422.9) MB, 8.3 / 0.0 ms (average mu = 0.120, current mu = 0.058) allocation failure
[83442:0x102804000] 123066 ms: Scavenge 1371.7 (1422.9) -> 1370.9 (1423.9) MB, 4.1 / 0.0 ms (average mu = 0.120, current mu = 0.058) allocation failure
[83442:0x102804000] 123071 ms: Scavenge 1371.7 (1423.9) -> 1371.0 (1424.4) MB, 3.9 / 0.0 ms (average mu = 0.120, current mu = 0.058) allocation failure
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 0x3b944125be3d]
Security context: 0x164494d1e6e9 <JSObject>
1: SourceMapConsumer_allGeneratedPositionsFor [0x16448b97d331] [/Users/alberto.iglesias/Coding/iteisa/projects/ceoe-gis/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x3b944240968c](this=0x1644193fb679 <BasicSourceMapConsumer map = 0x16448ea8a239>,aArgs=0x16447d082249 <Object map = 0x16448ea98939>)
2: /* anonym...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x10003d035 node::Abort() [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
2: 0x10003d23f node::OnFatalError(char const*, char const*) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
3: 0x1001b8e15 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
4: 0x100586d72 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
5: 0x100589845 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
6: 0x1005856ef v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
7: 0x1005838c4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
8: 0x10059015c v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
9: 0x1005901df v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
10: 0x10055fb24 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
11: 0x1007e7e04 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/alberto.iglesias/.nvm/versions/node/v10.16.3/bin/node]
12: 0x3b944125be3d
13: 0x3b944240968c
Abort trap: 6
SourceMapConsumer_allGeneratedPositionsFor
ãããåå ã ãšæããŸãã éçºã¢ãŒãã§ã¯ããœãŒã¹ãããã®çæããããŸãã æéã®çµéãšãšãã«ããã®ãœãŒã¹ããããã©ã°ã€ã³ã¯ã¡ã¢ãªãä¿æãããããšæããŸãã
ãœãŒã¹ãããã®çæããªãã«ããŠãåãåé¡ãçºçããŸã
СеÑгейã
10ïŒ01 GMTã§ã®2019幎12æ24æ¥ã«ã¯ããšãããšãŒã¬[email protected]ã¯æžããŸããïŒ
SourceMapConsumer_allGeneratedPositionsForãããåå ã ãšæããŸãã éçºã¢ãŒãã§ã¯ããœãŒã¹ãããã®çæããããŸãã æéã®çµéãšãšãã«ããããã®ãœãŒã¹ããããã©ã°ã€ã³ã¯ã¡ã¢ãªãä¿æãããããšæããŸãã
â
ããªããã³ã¡ã³ãããã®ã§ããªãã¯ãããåãåã£ãŠããŸãã
ãã®ã¡ãŒã«ã«çŽæ¥è¿ä¿¡ããããGitHubã§ç»é²ã解é€ããŠãã ããã
ãç§ã¯ãŸã ãããçµéšããŠããŸãããšæçš¿ããŠãåé¡ã¯è§£æ±ºããªãããšã«æ³šæããŠãã ããã 人ã ã調ã¹ãããã®å®å šãªè€è£œãæäŸããŸããããã§ãªãå Žåãããªãã®ã³ã¡ã³ãã¯æåã®åé¡ã§ðãè¡ãã®ãšåãã§ãããçç±ããªãåé¡ã®ãã¹ãŠã®äººã«pingãéä¿¡ããŸãã
ã³ã¡ã³ããå®çšçãŸãã¯æçšã§ããããšãåžžã«ç¢ºèªããŠãã ããã ããšãã°ãåé¡ã®èª¿æ»ã«åºã¥ããŠç©äºãå ±æããematipicoã®ããã«åœ¹ç«ã¡ãŸãã ããŸã ãã®åé¡ããããŸãããšèšã£ãŠã圹ã«ç«ã¡ãŸããã
åé¿çã¯ãããŸããïŒ CI / CDãã€ãã©ã€ã³ã1GBã®RAMã§å€±æããŸãã
@timneutkensã®åçŸæé ã¯ããã®ã¯ããŒãºãå·ã«èšèŒãããŠãããšããã§ãã
https://github.com/zeit/next.js/issues/9442#issuecomment -554839437
@ Vista1nikã®åé¿çã¯ãéæšå¥šã®éçãã£ã¬ã¯ããªãåäœæããããšã§ããã
é¢é£ããçŸåšã®åé¡ïŒ
ããã誰ããå©ããå Žåã«åããŠãè°è«ã«è¿œå ããã ãã§ãã
ã¡ã¢ãªäžè¶³ãçºçããŠããŸããããç§ã®å Žåã¯äœãåé¡ã§ããããããããŸããã
次ã®ã³ãŒãã¹ããããã§ã¯ã const Icon
ãããŸããŸundefined
ããå Žåãã³ãŒãã¯ã³ã³ããŒãã³ããæå¹ãã©ããããã§ãã¯ããç¡éã«ãŒãã«å
¥ããŸãã
const iconMapping = {
"flash-outline": FlashOutline,
};
export const Icon = ({ name }) => {
const Icon = iconMapping[name];
return <Icon />;
}
const Icon
ãå®çŸ©ãããŠããªããã©ããã®ãã§ãã¯ãè¿œå ãããšãã¡ã¢ãªäžè¶³ã®åé¡ã解æ¶ãããŸãã
...
const Icon = iconMapping[name];
if (!Icon) return null;
return <Icon />;
}
åãããšãç§ã«ãèµ·ãããŸããããããŠç§ã¯ãããåŒãèµ·ãããã¿ã€ããã¹ã§ããããšã«æ°ã¥ããŸããïŒ
const Button = ({ children }) => {
// BUG: the button should be lower case (the HTML input)
// instead of CamelCase (an undefined component)
return <Button>{children}</Button>
}
Next.jsã®ææ°ããŒãžã§ã³ã«ã¢ããã°ã¬ãŒãããŠã¿ãŠãã ãããæè¿ãã¡ã¢ãªäœ¿çšéãå€§å¹ ã«æé©åããŸããã
@timneutkens ãç§ã¯ææ°ããŒãžã§ã³ïŒ9.3.5ïŒãæã£ãŠããŸãã ç§ã¯ä»æãããžã§ã¯ããäœæããæ°ååŸã«ãã®ãšã©ãŒã«çŽé¢ããŸããã
next-source-maps
ã䜿çšããŠãœãŒã¹ãããã§ã¢ããªãæ§ç¯ããŠãããšãã«ãCricleCIã§åæ§ã®åé¡ãçºçããŸãã
NODE_OPTIONS="--max_old_space_size=4096"
ã¯ããŒã«ã«ã§åœ¹ç«ã¡ãŸããããCircleCIã§ã¯ãå°ãªããšããããæ©èœãããã«ã¯ããªãœãŒã¹ã¯ã©ã¹https://circleci.com/docs/2.0/configuration-reference/#resource_classãlarge
ã«å¢ããå¿
èŠããããŸããæ£ããã
ä»æ¥ã次ã®9.3.6ã«æŽæ°ããåŸããã®ãšã©ãŒãçºçãå§ããŸããã
<--- Last few GCs --->
[66325:0x108008000] 17639 ms: Mark-sweep 1936.2 (2071.4) -> 1923.6 (2073.4) MB, 283.4 / 0.0 ms (average mu = 0.157, current mu = 0.048) allocation failure scavenge might not succeed
[66325:0x108008000] 17937 ms: Mark-sweep 1938.1 (2073.4) -> 1925.4 (2075.4) MB, 285.8 / 0.0 ms (average mu = 0.108, current mu = 0.042) allocation failure scavenge might not succeed
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x0fb9ac667d09 <JSObject>
0: builtin exit frame: stringify(this=0x0fb9ac6598a9 <Object map = 0xfb921b01449>,0x0fb958e804d1 <undefined>,0x0fb958e804d1 <undefined>,0x0fb910180ec1 <Object map = 0xfb9d8491399>,0x0fb9ac6598a9 <Object map = 0xfb921b01449>)
1: arguments adaptor frame: 1->3
2: callAsync [0xfb9320a6cf9] [0x0fb958e804d1 <undefined>:~1] [pc=0x1aa09fe84627](this=0x0fb9320a6909 <Hook map = 0xfb9d8495179>...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
...
ïŒ12280ã§ææ¡ãããŠããããã«ã tsconfig.json
paths
ããŠä¿®æ£ããŸãã
ããããå¥ã®åå
9.0.5ãã9.3.6ã«ã¢ããã°ã¬ãŒãããåŸããåãåé¡ãçºçããŸãã
Creating an optimized production build ..
<--- Last few GCs --->
[1600:0000020DB9FFEBE0] 26245 ms: Mark-sweep 1958.0 (2080.3) -> 1945.0 (2081.5) MB, 266.4 / 0.0 ms (average mu = 0.179, current mu = 0.077) allocation failure scavenge might not succeed
[1600:0000020DB9FFEBE0] 26530 ms: Mark-sweep 1959.9 (2082.0) -> 1947.2 (2083.8) MB, 265.9 / 0.0 ms (average mu = 0.127, current mu = 0.068) allocation failure scavenge might not succeed
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 00007FF77B4D4DDD]
Security context: 0x00e7d00c08d1 <JSObject>
1: /* anonymous */(aka /* anonymous */) [000002BB3E5CAA29] [C:\Users\...\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:~27] [pc=00000147695447FC](this=0x00d9404004b1 <undefined>,0x001a9e083681 <Object map = 000003D51551D3A9>,0x001a9e0838d9 <Object map = 000003D515521AE9>,0x001a9e083979 ...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF77A8D363F napi_wrap+128063
2: 00007FF77A872836 v8::base::CPU::has_sse+35142
3: 00007FF77A8734F6 v8::base::CPU::has_sse+38406
4: 00007FF77B089F4E v8::Isolate::ReportExternalAllocationLimitReached+94
5: 00007FF77B072021 v8::SharedArrayBuffer::Externalize+833
6: 00007FF77AF3E57C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
7: 00007FF77AF497D0 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
8: 00007FF77AF462F4 v8::internal::Heap::PageFlagsAreConsistent+3204
9: 00007FF77AF3BB13 v8::internal::Heap::CollectGarbage+1283
10: 00007FF77AF3A184 v8::internal::Heap::AddRetainedMap+2452
11: 00007FF77AF5C734 v8::internal::Factory::NewInternalizedStringImpl+132
12: 00007FF77AD9C7FD v8::internal::DescriptorArray::Allocate+4941
13: 00007FF77ADAD0C5 v8::internal::StringTable::LookupString+373
14: 00007FF77AAAF356 v8::internal::Factory::InternalizeName+54
15: 00007FF77ACAB0BE v8::internal::Runtime::GetObjectProperty+9662
16: 00007FF77B4D4DDD v8::internal::SetupIsolateDelegate::SetupHeap+546637
17: 00000147695447FC
äœãæ¡ãïŒ
ããããŸããã node_modules
ãåé€ããŠäŸåé¢ä¿ãåã€ã³ã¹ããŒã«ããåŸãã«ããªã¢ããŒãžã§ã³ã§åäœããããã§ãããå¥ã®ãšã©ãŒãçºçããŸããïŒ Cannot find module 'next-server/dist/server/next-server'.
ã ããªãã¿ã§ããïŒ
äºè§£ããŸããã import Server from "next/dist/next-server/server/next-server";
ã
ä»ã§ã¯æ£åžžã«åäœããŸãã ãååããã ãããããšãããããŸãïŒ
@szazaã©ã®ããã«ããŠãã®ã¢ãžã¥ãŒã«ããããžã§ã¯ãã«ã€ã³ããŒãããããšã«ãªã£ãã®ã§ããïŒ ããã¯å
éšã¢ãžã¥ãŒã«ã§ããïŒ ä»£ããã«'next'
ãã€ã³ããŒãããã€ããã ã£ããšæããŸããïŒ
TypeScriptã§æžããã倧èŠæš¡ãªãããžã§ã¯ãã«åãçµãã§ããŸãã èš±å¯ãããŠããªããŠãŒã¶ãŒããã°ã€ã³ããŒãžã«ãªãã€ã¬ã¯ããããã¹ããŒãèªèšŒããã«ãŠã§ã¢ãæ§æãããŠããŸãã ããã¯æ¬¡ã®æ¹æ³ã§å®è£ ãããŸãã
import Server from "next-server/dist/server/next-server";
...
export const initPassport = (
server: Express,
app: Server,
authStrategies: string[]
) => {
...
return app.render(req, res, AuthRoutes.LOGIN_PAGE);
...
}
次ã®ããŒãžã§ã³ã9.0.5ãã9.3.7-canary.0ã«æŽæ°ããåŸã Server
ã¿ã€ãã¯next-server/dist/...
ããã§ã¯ãªããäžèšã®ãã¹ããã€ã³ããŒãã§ããªããªããŸããã
package.jsonå ã®ãã¹ãŠã®ã©ã€ãã©ãªãã¢ããã°ã¬ãŒããããšãã«ãåããšã©ãŒãçºçããŸããã çŸåšãç§ã¯ãã¹ãŠã®åé¡ãªã@ãã¡ã€ã/次-CSSã§NextJS 9.2.2ã䜿çšããŠããŸãã äžéšã®ããŒãžã§ã³ã®ã©ã€ãã©ãªã§ã¡ã¢ãªäžè¶³ã®åé¡ãçºçããããNextJSãšäœããã®çç±ã§ç«¶åããŠããããã§ãã
ç§ã®çŸåšã®ããã±ãŒãžæ§æã¯-
{
"dependencies": {
"@zeit/next-css": "^1.0.1",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"cookie-parser": "^1.4.4",
"cookie-session": "^1.4.0",
"express": "^4.17.1",
"helmet": "^3.21.3",
"json-server": "^0.16.1",
"morgan": "^1.9.1",
"next": "^9.2.2",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"passport-strategy": "^1.0.0",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-mathjax2": "0.0.2",
"shaka-player": "^2.5.10",
"styled-components": "^5.0.1"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.8.6",
"@babel/preset-react": "^7.8.3",
"babel-jest": "^25.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"babel-plugin-styled-components": "^1.10.7",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest": "^25.1.0",
"react-test-renderer": "^16.13.0"
}
}
ç¹å®ã®åé¡ãã©ã€ãã©ãªhttps://github.com/google/schema-dtsã®äœ¿çšæ³ã«çµã蟌ã¿ãŸãã
pages/
ãã1ããŒãžãé€ããã¹ãŠãåé€ãããããžã§ã¯ãããã«ãããããŸã§ã³ãŒããåé€ããŠãããåŸã
ã«ã³ãŒããå
ã«æ»ãããšã§ãåé¡ããããã°ããŸããã
å€åããã¯ãã®ã¹ã¬ããã«åºããã誰ããå©ããŸãð€·ââïž
next-source-maps
ã䜿çšããŠãœãŒã¹ãããã§ã¢ããªãæ§ç¯ããŠãããšãã«ãCricleCIã§åæ§ã®åé¡ãçºçããŸãã
NODE_OPTIONS="--max_old_space_size=4096"
ã¯ããŒã«ã«ã§åœ¹ç«ã¡ãŸããããCircleCIã§ã¯ãå°ãªããšããããæ©èœãããã«ã¯ããªãœãŒã¹ã¯ã©ã¹https://circleci.com/docs/2.0/configuration-reference/#resource_classãlarge
ã«å¢ããå¿ èŠããããŸããæ£ããã
ããã¯ç§ãã¡ã®ããã«åããå¯äžã®ãã®ã§ãð
ããªã倧ããªNext.jsã¢ããªïŒv9.3.6ïŒã§ã¯ãã¢ããªã®èµ·åïŒéçºã¢ãŒãïŒã§ããŒãã¡ã¢ãªã®åé¡ãçºçããããŒã10ã§NODE_OPTIONS="--max_old_space_size=4096"
ãèšå®ãããšãããŒã10ã§åé¡ãçºçããŸãããããŒã12以éã§ã¯ãããã¯ãã®ã³ããããšãã³ã³ãããŒã«å²ãåœãŠãããã¡ã¢ãªã®éãèæ
®ããå¥ã®ã³ãããã§åŠçãããŸãïŒLinuxã®ã¿afaikïŒã
ããã誰ããå©ããå Žåã«åããŠãè°è«ã«è¿œå ããã ãã§ãã
ã¡ã¢ãªäžè¶³ãçºçããŠããŸããããç§ã®å Žåã¯äœãåé¡ã§ããããããããŸããã次ã®ã³ãŒãã¹ããããã§ã¯ã
const Icon
ãããŸããŸundefined
ããå Žåãã³ãŒãã¯ã³ã³ããŒãã³ããæå¹ãã©ããããã§ãã¯ããç¡éã«ãŒãã«å ¥ããŸããconst iconMapping = { "flash-outline": FlashOutline, }; export const Icon = ({ name }) => { const Icon = iconMapping[name]; return <Icon />; }
const Icon
ãå®çŸ©ãããŠããªããã©ããã®ãã§ãã¯ãè¿œå ãããšãã¡ã¢ãªäžè¶³ã®åé¡ã解æ¶ãããŸãã... const Icon = iconMapping[name]; if (!Icon) return null; return <Icon />; }
ããããã®åé¡ã®åå ãšãªã£ãã³ãŒãã®äžéšã§ããããšãã©ã®ããã«ããŠç解ããŸãããïŒ
èå³æ·±ãããšã«ããã®ã³ãŒããããäžåºŠèŠããšãå®éã«ã¯å¥ã®ã³ãŒãã衚瀺ãããŸã
åé¡ã ã¢ã€ã³ã³ã¯ã³ã³ããŒãã³ãã§ãããã¢ã€ã³ã³ã®å
éšã§ã¢ã€ã³ã³ãåç
§ããŠããŸãã
èªäœã
ç§ããããç解ããæ¹æ³ã¯ãäž»ã«ã³ã³ããŒãã³ãããšã«åé¢ããããšã§ãã
ã©ã®ã³ã³ããŒãã³ããåå ã§ããããããããŸã§ãåé¡ãåçŸããŠã¿ãŠãã ãã
ããã
æšæã18ïŒ20ã§2020幎5æ21æ¥ã«ã¯ãVivek_Neel [email protected]ã¯æžããŸããïŒ
ããã誰ããå©ããå Žåã«åããŠãè°è«ã«è¿œå ããã ãã§ãã
ç§ã¯ã¡ã¢ãªäžè¶³ãçµéšããŠããŸããããããŠããããç§ã¯äœããã£ãããç¥ããŸãã
ç§ã®å Žåã®åé¡ïŒæ¬¡ã®ã³ãŒãã¹ããããã§ã¯ãconstã¢ã€ã³ã³ãããŸããŸæªå®çŸ©ã®å Žå
ã³ãŒãã¯ãã³ã³ããŒãã³ããæå¹ãã©ããããã§ãã¯ããç¡éã«ãŒãã«å ¥ããŸããconst iconMapping = {
ãflash-outlineãïŒFlashOutlineã
};
export const Icon =ïŒ{name}ïŒ=> {
const Icon = iconMapping [name];æ»ã
;
}constã¢ã€ã³ã³ãå®çŸ©ãããŠããªããã©ããã®ãã§ãã¯ãè¿œå ãããšã
ã¡ã¢ãªã®åé¡ã..ã
const Icon = iconMapping [name];ïŒïŒIconïŒãnullãè¿ãå Žå;
æ»ã;
}ããããããåŒãèµ·ãããã³ãŒãã®äžéšã§ããããšãã©ã®ããã«ç解ããŸããã
åé¡ïŒâ
ããªããã³ã¡ã³ãããã®ã§ããªãã¯ãããåãåã£ãŠããŸãã
ãã®ã¡ãŒã«ã«çŽæ¥è¿ä¿¡ããGitHubã§è¡šç€ºããŠãã ãã
https://github.com/zeit/next.js/issues/7929#issuecomment-632187103 ããŸãã¯
éäŒ
https://github.com/notifications/unsubscribe-auth/ABA2CL7ZJQY5YPYJVCJMCODRSVIE7ANCNFSM4ICM4RAA
ã>>
ç§ã®é»è©±ããéä¿¡ãããŸãã
ç§ãç解ããŠããéããNext.jsïŒv9.0.0以éïŒã¯å€§èŠæš¡ãªWebã¢ããªã±ãŒã·ã§ã³ã®ã¡ã¢ãªãæé©åã§ããŸããã ãããžã§ã¯ãã®ãµãŒããŒåŽéšåã®ã³ã³ãã€ã«ãéå§ãããšããã«ãããã»ã¹ãã¡ã¢ãªå¶éã«éããŸãã
éçºã¢ãŒãã§ã¯ãããŒã«ã«ãµãŒããŒã¯æåã¯åé¡ãããŸãããããã°ãããããšãå²ãåœãŠãããã¡ã¢ãªãççºããã¡ã¢ãªããŒããšã©ãŒã衚瀺ãããŸãã
ã³ã¢ããŒã ã®èª°ãããã®åé¡ãèªèããåé¡ã®ããªã¢ãŒãžãæäŒã£ãŠãããŸãããïŒ
ç§ãšç§ã®ããŒã ã¯ã匷åãªã©ãããããã䜿çšããŠããŠããã¢ããªã±ãŒã·ã§ã³ãããŒã«ã«ã§ãã«ãã§ããªãå ŽåããããŸãã ãã®åé¡ã¯ã»ãŒ1幎åã®ãã®ã§ããããã®åé¡ã«é¢ããæ確ãªæŽæ°ã¯ãããŸããã å人çã«ã¯ãã¢ããªã±ãŒã·ã§ã³ã2ã€ã®ãµãNext.jsãããžã§ã¯ãã«åå²ããããšã ããèããããŸããããã¯ããã€ã®æ¥ãCIã§ãã¢ããªã±ãŒã·ã§ã³ããã«ãã§ããªããªãã®ã§ã¯ãªãããšå¿é ããŠããããã§ãïŒãã§ã«åŒ·åãªã¢ããªã±ãŒã·ã§ã³ã䜿çšããŠããŸãïŒããããè¡ãããã®VMïŒã
ããã§æªè ã«ãªã£ãŠãã¿ãŸããããã å©ããæ±ããŠããŸãã
ç·šéïŒNext.js 9.3.3ã«æŽæ°ããŸããããæ¹åã¯ãããŸãã
ã³ã¢ããŒã ã®èª°ãããã®åé¡ãèªèããåé¡ã®ããªã¢ãŒãžãæäŒã£ãŠãããŸãããïŒ
ãã®ã¹ã¬ããã§ãå®å
šãªè€è£œãæäŸããããã¢ããªã±ãŒã·ã§ã³ãæäŸããããã«äœåºŠããé¡ãããŸããã ç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ã®åé¡ã远跡ããããã«ãç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ã®å
容ãåæããããšã¯ã§ããŸããã
9.4 btwã§ãœãŒã¹ãããã®çæãå€æŽããã®ã§ãå¿
ãææ°ããŒãžã§ã³ã«ã¢ããã°ã¬ãŒãããå¿
èŠããããŸãã
https://github.com/zeit/next.js/issues/7929#issuecomment -618297553ã®ãããªFWIWã®ã±ãŒã¹ã¯ãã¢ããªã±ãŒã·ã§ã³å ã§äœæãããç¡éã«ãŒãã§ãããããããããŸãæ€åºããããšã¯ã§ããŸããïŒæçµçã«Reactã¬ã³ããªã³ã°ãå®è¡ããããïŒ ïŒã
ç§ãç解ããŠããéããNext.jsïŒv9.0.0以éïŒã¯å€§èŠæš¡ãªWebã¢ããªã±ãŒã·ã§ã³ã®ã¡ã¢ãªãæé©åã§ããŸããã ãããžã§ã¯ãã®ãµãŒããŒåŽéšåã®ã³ã³ãã€ã«ãéå§ãããšããã«ãããã»ã¹ãã¡ã¢ãªå¶éã«éããŸãã
ããªããè€è£œãæäŸããªãã£ãããšãèãããšãç§ã¯ç§ãã¡èªèº«ã®ã¢ããªã±ãŒã·ã§ã³ãåç §ããããšããã§ããŸããã
Next.jsã§äœçŸäžãã®ãªã¯ãšã¹ããå®è¡ããå®è¡ããã¢ããªã±ãŒã·ã§ã³ã«ã¯300以äžã®ããŒãžããããŸãã ããŒã ããã®ã¡ã¢ãªã®åé¡ã¯å ±åãããŠããããããŒã ã¯1æ¥ãéããŠå€ãã®ããŒãžã§äœæ¥ããŠããŸãã
ããã¯åé¡ãããå¯èœæ§ãããããšãåŠå®ãããã®ã§ã¯ãªãããšã«æ³šæããŠãã ããããããã¡ã€ã«ã§ããæ確ãªè€è£œãŸãã¯ã¢ããªã±ãŒã·ã§ã³ãæäŸããªãå Žåãåé¡ããããã©ããã远跡ããããšã¯äžå¯èœã§ãããšèšã£ãŠããŸãã
ãŸããææã®ã³ã³ãµã«ãã£ã³ã°ãæ±ããŠããããã§ããªãã®ã§ãç¡æã§ã¢ããªã±ãŒã·ã§ã³ãèŠãŠãããŸãã
ãã®ã¹ã¬ããã§ãå®å šãªè€è£œãæäŸããããã¢ããªã±ãŒã·ã§ã³ãæäŸããããã«äœåºŠããé¡ãããŸããã ç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ã®åé¡ã远跡ããããã«ãç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ã®å 容ãåæããããšã¯ã§ããŸããã
ç§ããã®å·ãéããŠä»¥æ¥ãä»ã®äººã ãããã«ãªããžããªãæäŸããŠããŸããã ãã®ãããåé¡ãåéãããŸããããã®ãããåé¡ãåçŸããã«ã¯ãªããžããªãå¿ èŠã§ããããšã瀺ãã©ãã«ããããŸããã
éãããŸãŸã«ããŠãã
Webã¢ããªã±ãŒã·ã§ã³ãã¯ã©ã€ã¢ã³ãã«å±ãããœãŒã¹ã³ãŒããéããŠããããããªããžããªãæäŸã§ããŸããã
9.4 btwã§ãœãŒã¹ãããã®çæãå€æŽããã®ã§ãå¿ ãææ°ããŒãžã§ã³ã«ã¢ããã°ã¬ãŒãããå¿ èŠããããŸãã
ãã®æ©èœã¯ãªããã€ã³/ãªããã¢ãŠãã§ããïŒ åé¡ãéããåŸïŒãã£ãšåã«ïŒããœãŒã¹ãããã®çæãåé€ããŸããïŒãã©ã°ã€ã³ãä»ããŠè¡ãããŸããïŒããããŸã圹ã«ç«ã¡ãŸããã§ããã
ãã®åé¡ãç¡å¹ã§ãããšæãããå Žåã¯ãéããŠãã ããã ãªããžããªã¯ãã£ãšåã«å ±æãããŠãããããããæå¹ã§ã¯ãªãå¯èœæ§ããããŸãã
ããªã¢ãŒãžãæ¯æŽããããšã¯ã§ããŸãããã¬ã€ãã³ã¹ãå¿ èŠã§ãã
â² styled-icons (master) â yarn build:ci
yarn run v1.22.4
$ lerna run build
lerna notice cli v3.21.0
lerna info Executing command in 25 packages: "yarn run build"
lerna info run Ran npm script 'build' in '@styled-icons/styled-icon' in 6.6s:
$ tsc --project tsconfig.esm.json && mv dist/index.js dist/index.esm.js && tsc --project tsconfig.json
lerna ERR! yarn run build exited 1 in '@styled-icons/boxicons-logos'
lerna ERR! yarn run build stdout:
$ build-pack
Reading icon packs...
Error reading icons from pack
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
error Command failed with exit code 1.
lerna ERR! yarn run build exited 1 in '@styled-icons/boxicons-logos'
lerna WARN complete Waiting for 4 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
è€è£œã¯å®è¡ã§ããªãã®ã§ããã®ãããªå Žåãé¿ããããã«ãããã§å ±åãããã¹ãŠã®äººã«è€è£œãæäŸããããã«äŸé Œããã®ã¯ãªãã§ããã ãŸãããããã®åé¡ã100ïŒ åãã«ãªãå¯èœæ§ã¯éåžžã«äœãã§ãã
ãã®æ©èœã¯ãªããã€ã³/ãªããã¢ãŠãã§ããïŒ åé¡ãéããåŸïŒãã£ãšåã«ïŒããœãŒã¹ãããã®çæãåé€ããŸããïŒãã©ã°ã€ã³ãä»ããŠè¡ãããŸããïŒããããŸã圹ã«ç«ã¡ãŸããã§ããã
éçºã§ã¯ãœãŒã¹ãããã¯åžžã«æå¹ã«ãªã£ãŠããŸãããè©äŸ¡ãœãŒã¹ãããã«åãæ¿ããŸããã
ãã®ãããåé¡ãåéãããŸããããã®ãããåé¡ãåçŸããã«ã¯ãªããžããªãå¿ èŠã§ããããšã瀺ãã©ãã«ããããŸããã
ããå€ãã®ã¬ããŒããå±ãç¶ããè€è£œãæ±ãç¶ãããããå床éããŸããïŒ https ïŒ
ãã®ã¹ã¬ããã§æäŸãããŠããè€è£œã¯2ã€ã ãã§ãã 1ã€ã¯Next.jsïŒ now dev
ã¡ã¢ãªæ¶è²»ïŒãšã¯å®å
šã«ç¡é¢ä¿ã§ããããã1ã€ã¯å®è¡/ãã«ãã§ããŸããã
ãããã£ãŠããªãç§ãããäžåºŠå®å šãªè€è£œãæ±ããŠããã®ããããã§ãªããã°ããã調æ»ããããšã¯äžå¯èœã§ããç¶ããã§ãããã
Webã¢ããªã±ãŒã·ã§ã³ãã¯ã©ã€ã¢ã³ãã«å±ãããœãŒã¹ã³ãŒããéããŠããããããªããžããªãæäŸã§ããŸããã
æ°è»œã«[email protected]ã«é£çµ¡ããŠãã ãããNDAãèšå®ã§ããŸããããã¯ãèšå®ã«ããªãã®æéããããããšãèãããšãã³ã³ãµã«ãã£ã³ã°ãè¡ãå¿ èŠãããããšãæå³ããŸããç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ãæ¯æŽããã¯ã©ã€ã¢ã³ãçšã®ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããŠããŸãã
ãããã®ã¢ããªã±ãŒã·ã§ã³ã¯ãåã«ãµã€ãºã®éçã«éããŠã¡ã¢ãªäžè¶³ã«ãªãå§ãããšæããŸãã
NODE_OPTIONS=--max-old-space-size=4096
ä»ããŠãããå€ãã®ãã«ããå®è¡ããå¿ èŠããããŸãããŸãã¯ãæ°ãããã£ã³ã¯æ©èœãæå¹ã«ããããšãã§ããŸãã
// next.config.js module.exports = { experimental: { granularChunks: true } }
ããã¯ç§ãã¡ã®åé¡ã解決ããŸããã§ãããFYIã
ãã®åé¡ãçµã¿èŸŒã¿ã®æ¬¡åãµãŒããŒèµ·åã§çºçãããã©ããã¯èª°ã«ãããããŸãããïŒ
ããªãã¡ïŒ Next start
ã§ã¯ãªãNODE_ENV=production node server.js"
ïŒ
ãã«ããçæããåŸã«åé¡ãçºçããŸãã ãnodeserver.jsããå®è¡ããŠããã«ã¹ã¿ã ãµãŒããŒã§ã¯ããã®ãšã©ãŒãåä¿¡ããŠââããã»ã¹ãåèµ·åãããŸã§ã¡ã¢ãªãèç©ãããŸããã€ãŸãããã£ãã·ã¥ãããã«ãŒããªã©ããã¹ãŠå€±ãããããããã®åŸããŒãžã«å ¥ãæåã®ãŠãŒã¶ãŒã«ãšã£ãŠã¯éåžžã«é ããªããŸãããã¹ãŠã®SSRãçºçããŠããŸãã
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
0|profiles | 1: 0xa093f0 node::Abort() [node /home/projects/profiles/server.js]
0|profiles | 2: 0xa097fc node::OnFatalError(char const*, char const*) [node /home/projects/profiles/server.js]
0|profiles | 3: 0xb842ae v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node /home/projects/profiles/server.js]
0|profiles | 4: 0xb84629 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node /home/projects/profiles/server.js]
0|profiles | 5: 0xd30fe5 [node /home/projects/profiles/server.js]
0|profiles | 6: 0xd31676 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node /home/projects/profiles/server.js]
0|profiles | 7: 0xd3def5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node /home/projects/profiles/server.js]
0|profiles | 8: 0xd3eda5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node /home/projects/profiles/server.js]
0|profiles | 9: 0xd4185c v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node /home/projects/profiles/server.js]
0|profiles | 10: 0xd0830b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node /home/projects/profiles/server.js]
0|profiles | 11: 0x1049f4e v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node /home/projects/profiles/server.js]
0|profiles | 12: 0x13cf019 [node /home/projects/profiles/server.js]
ããã¯ç§ã®package.jsonã§ã
{
"name": "profiles",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "yarn relay && next build",
"start": "NODE_ENV=production node server.js",
"relay": "relay-compiler --src ./ --exclude '**/.next/**' '**/node_modules/**' '**/test/**' '**/__generated__/**' --exclude '**/schema/**' --schema ./var/schema.graphql --artifactDirectory __generated__",
"relay-get-schema-stage": "graphql get-schema --project sourcr --endpoint stage && yarn run relay",
"relay-get-schema-prod": "graphql get-schema --project sourcr --endpoint prod && yarn run relay",
"relay-get-schema-dev": "graphql get-schema --project sourcr --endpoint dev && yarn run relay",
"pm2": "pm2"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/plugin-proposal-export-default-from": "^7.10.4",
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.11.0",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/react-fontawesome": "^0.1.11",
"@sentry/browser": "^5.21.0",
"@svgr/webpack": "^5.4.0",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.11.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"bootstrap": "^4.5.2",
"classnames": "^2.2.6",
"file-loader": "^6.0.0",
"formsy-react": "^1.1.5",
"graphql": "^15.3.0",
"jwt-decode": "^2.2.0",
"mobx": "^5.15.5",
"moment": "^2.28.0",
"next": "9.5.1",
"path": "^0.12.7",
"pm2": "^4.5.0",
"query-string": "^6.13.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-helmet": "^6.1.0",
"react-player": "^2.6.0",
"react-relay": "^10.0.1",
"react-relay-network-modern": "^4.7.4",
"react-relay-network-modern-ssr": "^1.4.0",
"react-toastify": "^6.0.8",
"relay-compiler": "^10.0.1",
"relay-devtools": "^1.4.0",
"relay-devtools-core": "^0.0.8",
"relay-runtime": "^10.0.1",
"sass": "^1.26.10",
"sass-resources-loader": "^2.0.3",
"siema": "^1.5.1",
"transform-class-properties": "^0.1.0"
},
"devDependencies": {
"babel-plugin-relay": "^10.0.1"
}
}
æŽèµ°ããnext build
ã®ã¡ã¢ãªäžè¶³ã«å¯ŸåŠããŠããå¯èœæ§ãããå Žåã¯ã .babelrc
ãŸãã¯babel.config.js
åé€ããŠã¿ãŠãã ããã Next.jsã«é¢ä¿ã®ãªããããžã§ã¯ãã®å¥ã®éšåã«.babelrc
ãããã next build
ãšäžèŽããŸããã ç§ã®ç¶æ³ã§ã¯ãåé¡ã¯Dockerã§ã®ã¿çºçããŠããŸããã ããããDockerfileãå€æŽããŠä¿®æ£ããŸãã
FROM node:12
WORKDIR /app
COPY package.json package-lock.json /app/
ENV NODE_ENV production
RUN npm install
COPY . /app
RUN npm run build
RUN npm run next-build
EXPOSE 8081
CMD ["npm", "start"]
ããã«
FROM node:12
WORKDIR /app
COPY package.json package-lock.json /app/
ENV NODE_ENV production
RUN npm install
COPY . /app
RUN npm run build
# Let Next.js use its own Babel config
RUN rm .babelrc
RUN npm run next-build
EXPOSE 8081
CMD ["npm", "start"]
GitLab CIã§å
±æã©ã³ããŒã䜿çšããŠããå Žåããããã®ã©ã³ããŒã¯SIGABRT
ãã«ãããã»ã¹ã匷å¶çµäºãã次ã«ãã®ãšã©ãŒãããªã¬ãŒããŸãã ã°ã«ãŒãã©ã³ããŒã«åãæ¿ããŠãããŸããããŸããã
next-transpile-modules
ã䜿çšããŠããå Žåãç§ã®è§£æ±ºçã¯ã次ã®ããã«resolveSymlinks
èšå®ïŒv4.1.0以éïŒãæå¹ã«ããããš
// next.config.js
const withTM = require("next-transpile-modules")([
"somepackage"
], {
resolveSymlinks: true
})
module.exports = {
...withTM()
}
somepackage
ãã倧ãããããïŒ500kbãã700kbïŒãšãããã§èª¬æããåé¡ã«æåã«ééããŸããããçªç¶ããã¹ãŠã®ã¡ã¢ãªïŒ8GBãªãã·ã§ã³ã§ãè©ŠããŠã¿ãŸããïŒã§ã¯ãããåŠçã§ããŸããã§ããã
ã·ã³ããªãã¯ãªã³ã¯ã«ãã£ãŠåŒãèµ·ããããã«ãŒããããã€ããããã¡ã¢ãªãææ°é¢æ°çã«è¥å€§åããåå ã«ãªããšæããŸãã
æãåèã«ãªãã³ã¡ã³ã
@timneutkensã¯ãã¬ããæã£ãŠããã®ã§ãåé¡ãåéããŠãã ããã