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

Alienpups commented 2 weeks ago

Link to reproduction

No response

Environment Info

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: fix: localized groups #15-Ubuntu SMP Thu Aug 8 19:13:06 UTC 2024 (Ubuntu 
Available memory (MB): 7939
Available CPU cores: 2
AMI-Name: ubuntu/images/hvm-ssd-gp3/ubuntu-noble-24.04-amd64-server-20240801

Describe the Bug

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 does 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.

.env:

# 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 config:

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

Reproduction Steps

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.

Adapters and Plugins

MongoDBAdapter

paulpopus commented 2 weeks ago

Do you get any errors or info from the logs on your server or in the console while this is happening?

Can you check the network tab as well? Is it failing to perhaps fetch any data client-side. If it's getting the initial data I'm suspecting something to do with CORS/CSRF or related issues.

Alienpups commented 2 weeks ago

Hi @paulpopus , I’m not seeing any errors in the logs/terminal. The initial load of the live preview works, but as soon as you make a change, the preview doesn’t update. Normally, the new “Exit Preview” button should also appear in the live preview, but that’s missing as well.

I’ve already asked around in several places, including the creators of AllAboutPayload on YouTube, but nobody had a solution there either.

Would it be possible for me to send you something privately so you can take a look at it yourself? I think that might be the quickest and most accessible way to solve this. What do you think?

Alienpups commented 1 week ago

Solved by simply using coolify.

github-actions[bot] commented 1 week ago

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.

payloadcms / payload