Issue with Live Preview and Preview Functionality on EC2 Instance in Combination with ‘pnpm run build/start’

Hi everyone,

I’m facing an issue with the live preview and preview functionality in a production environment on an AWS EC2 instance, and I’m hoping to get some support.

System Configuration:

Binaries:

• Node: 20.9.0
• npm: 10.1.0
• Yarn: N/A
• pnpm: 9.9.0

Relevant Packages:

• payload: 3.0.0-beta.98
• next: 15.0.0-canary.104
• @payloadcms/db-mongodb: 3.0.0-beta.98
• @payloadcms/email-nodemailer: 3.0.0-beta.98
• @payloadcms/graphql: 3.0.0-beta.98
• @payloadcms/live-preview: 3.0.0-beta.98
• @payloadcms/live-preview-react: 3.0.0-beta.98
• @payloadcms/next/utilities: 3.0.0-beta.98
• @payloadcms/plugin-cloud: 3.0.0-beta.98
• @payloadcms/plugin-form-builder: 3.0.0-beta.98
• @payloadcms/plugin-nested-docs: 3.0.0-beta.98
• @payloadcms/plugin-redirects: 3.0.0-beta.98
• @payloadcms/plugin-seo: 3.0.0-beta.98
• @payloadcms/richtext-lexical: 3.0.0-beta.98
• @payloadcms/translations: 3.0.0-beta.98
• @payloadcms/ui/shared: 3.0.0-beta.98
• react: 19.0.0-rc-06d0b89e-20240801
• react-dom: 19.0.0-rc-06d0b89e-20240801

Operating System:

• Platform: linux
• Arch: x64
• Version: #15-Ubuntu SMP Thu Aug 8 19:13:06 UTC 2024
• Available memory (MB): 7939
• Available CPU cores: 2
• AMI-Name: ubuntu/images/hvm-ssd-gp3/ubuntu-noble-24.04-amd64-server-20240801

Project Setup:

I created my project using the create-payload-app@beta both locally and on the AWS EC2 instance with the website template. I haven’t made any changes to the project aside from the necessary setup steps to properly configure Payload. In my local environment I run MongoDB in a docker container and also on the same AWS EC2 where Payload/Next.js are running.

Issue:
The live preview and preview functionality work under the following scenarios:

• Local with pnpm run dev: Live preview and preview work as expected.
• Local with pnpm run build/start: Live preview and preview work as expected.
• AWS EC2 with pnpm run dev: Live preview and preview work as expected.

The live preview and preview functionality do NOT work under the following scenarios:

• AWS EC2 with pnpm run build/start: The live preview and preview do not work. The content does not update in the live preview or when using the preview feature. This issue only occurs on the AWS EC2 instance when running the project in production mode (pnpm run build/start). All other aspects of the application function correctly.

Troubleshooting Steps Taken:

• Web Server Configuration: I initially experimented with Apache to forward requests to the Next.js server but removed it when troubleshooting the issue. After further testing, I have now reconfigured Apache and set it up again.
• Environment Variables: The .env files are identical between the local and EC2 environments, except for the URL settings (locally, I use localhost, while on EC2, I use the EC2 Elastic public IP address).
• Firewall/Network: The EC2 instance’s security groups are configured to allow all HTTP and HTTPS traffic. All relevant ports are open.
• Server Logs: No obvious errors in the logs that might indicate the issue. The application starts successfully and is accessible via the IP address.
• I also tried iptables instead of nginx/apache. That seemed to be the most performant way in general but it doesn’t help with my live-preview and preview-function bug.

Important Settings:

Environment Variables:

# Database connection string
DATABASE_URI=mongodb://xxxxxxx:xxxxxxx@localhost:27017
# Used to encrypt JWT tokens
PAYLOAD_SECRET=xxxxxxxxxxxxxxxxxxxx
# Used to format links and URLs
PAYLOAD_PUBLIC_SERVER_URL=http://3.78.42.108
NEXT_PUBLIC_SERVER_URL=http://3.78.42.108
# Used for CORS and CSRF protection
PAYLOAD_PUBLIC_DOMAIN_1=http://3.78.42.108
PAYLOAD_PUBLIC_DOMAIN_2=http://3.78.42.108:3000

Apache Configuration:

<VirtualHost *:80>
    ServerName 3.78.42.108
    ServerAdmin webmaster@localhost

    # Forward all requests to the Next.js application via the public IP
    ProxyPass "/" "http://3.78.42.108:3000/"
    ProxyPassReverse "/" "http://3.78.42.108:3000/"

    # Static files
    Alias /_next/static/ /home/ubuntu/fhm-xmas-24/.next/static/
    <Directory /home/ubuntu/fhm-xmas-24/.next/static/>
        Require all granted
        ExpiresActive Off
        Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
        Header set Pragma "no-cache"
        Header set Expires "0"
    </Directory>

    Alias /public/ /home/ubuntu/fhm-xmas-24/public/
    <Directory /home/ubuntu/fhm-xmas-24/public/>
        Require all granted
        ExpiresActive Off
        Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
        Header set Pragma "no-cache"
        Header set Expires "0"
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Question:

Does anyone have any insights into why the live preview and preview functionality are not working on the AWS EC2 instance when running in production mode (pnpm run build/start)? Are there specific differences in how Payload and Next.js operate in production that could be causing this issue?

I would greatly appreciate any guidance or suggestions. I’m happy to provide further details if needed.

Thank you in advance!

I just want it to function like in local environment or on EC2 when using pnpm run dev. In all those cases everything works fine without bugs, only pnpm run build/start on ec2 generates the live-preview and preview anomlies.