How to achieve seamless deployment of NextJS Application with AWS EC2 (Chunk Load Error related)
Unanswered
Cinnamon posted this in #help-forum
CinnamonOP
1. What I want to do
- Seamless deployment of NextJS Application
2. What's happening?
- I basically have 2 AWS EC2 instances on our company's frontend server instance
- When deploy app, one instance is shutdown, updated and run, then other one is changed.
- Problem occurs at these exchange:
The first error I got is ChunkLoadError, which HTML cannot find specified JS file, which is already gone from server.
I fixed(?) it by forcing refresh by detecting ChunkLoadError from error message and doing refresh on error.tsx globally.
To achieve this, I disabled all the cache by setting meta tag like Expire 0, Pragma / Cache-Control no cache, no store from layout.tsx
--- note: to understand basics ---
'next build' makes .next folder, which transpile source code.
With each build, you can have files with different names unless you set fixed build id on next.config.js, or use package like next-build-id
------
The second error is that I cannot control, similar to first one, but it occurs from CSS file. As browser cannot reach old CSS files from server anymore, UI become unreadable, pictures are not distinguishable. But it does not show any error by nature, so I can't make it force refresh.
I think my resolution of first error also not seems ok, so I wanna know how to completely and safely make my deployment process is clean and smooth.
3. Environment
- NextJS 14.1
- NodeJS 18.18.2 on Amazon Linux 2
- Deployment with AWS CodeDeploy
- Run with PM2
p.s.
I'm not devOps so I don't exactly know how our server is working exactly. Can it be server configuration problem?
At least, we don't use blue-green strategy.
- Seamless deployment of NextJS Application
2. What's happening?
- I basically have 2 AWS EC2 instances on our company's frontend server instance
- When deploy app, one instance is shutdown, updated and run, then other one is changed.
- Problem occurs at these exchange:
The first error I got is ChunkLoadError, which HTML cannot find specified JS file, which is already gone from server.
I fixed(?) it by forcing refresh by detecting ChunkLoadError from error message and doing refresh on error.tsx globally.
To achieve this, I disabled all the cache by setting meta tag like Expire 0, Pragma / Cache-Control no cache, no store from layout.tsx
--- note: to understand basics ---
'next build' makes .next folder, which transpile source code.
With each build, you can have files with different names unless you set fixed build id on next.config.js, or use package like next-build-id
------
The second error is that I cannot control, similar to first one, but it occurs from CSS file. As browser cannot reach old CSS files from server anymore, UI become unreadable, pictures are not distinguishable. But it does not show any error by nature, so I can't make it force refresh.
I think my resolution of first error also not seems ok, so I wanna know how to completely and safely make my deployment process is clean and smooth.
3. Environment
- NextJS 14.1
- NodeJS 18.18.2 on Amazon Linux 2
- Deployment with AWS CodeDeploy
- Run with PM2
p.s.
I'm not devOps so I don't exactly know how our server is working exactly. Can it be server configuration problem?
At least, we don't use blue-green strategy.