Issue with Live Preview in Website Template on EC2 Instance in Combination with 'pnpm run build/start'

[Alienpups]

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 EC2 instance, and I'm hoping to get some support.

System Configuration:

Binaries:

• Node: 20.11.1
• npm: 10.2.4
• 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: fix: localized groups #15-Ubuntu SMP Thu Aug 8 19:13:06 UTC 2024
• Available memory (MB): 7939
• Available CPU cores: 2

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 and other services.

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 scenario:

• AWS EC2 with pnpm run build/start: The live preview and preview load the initial content but nothing more. The content does not update in the live preview or when using the preview feature if you edit/change something. 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.

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 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!

[Alienpups]

Solved it myself by simply using coolify.