尝试使用 PM2 在 EC2 Amazon Linux 上运行 React 应用程序

Question

我尝试在 EC2 Amazon Linux 2023 上运行我的应用程序，但即使它在 pm2 日志中查找它运行的情况（显示我可以通过 localhost:5173 访问它的常规 vite 信息）。我无法通过“public-ip:5173”访问它。 AWS CodeBuild Pipeline 显示一切正常。入站角色中的安全组设置如下：

端口/协议	来源
5173/自定义 TCP	0.0.0.0/0
80/HTTP	0.0.0.0/0
80/HTTP	::/0
443/HTTPS	0.0.0.0/0

我的appspec.yml：

version: 0.0

os: linux 

 files:
 - source: /
   destination: /janus-ui
   overwrite: true

file_exists_behavior: OVERWRITE

permissions:
  - object: /
    pattern: "**"
    owner: ec2-user
    group: ec2-user

hooks:

  BeforeInstall:
    - location: scripts/before_install.sh
      timeout: 1600
      runas: root

  AfterInstall:
      - location: scripts/after_install.sh
        timeout: 1600
        runas: root

  ApplicationStart:
    - location: scripts/start_server.sh     
      timeout: 300
      runas: root

我的after_install.sh：

#!/bin/bash

# navigate to app folder
cd /janus-ui

# install dependencies
npm install
npm install --save react react-dom react-scripts react-particles-js
npm install pm2 -g

我的before_install.sh：

#!/bin/bash

# navigate to app folder
cd /janus-ui

# install node and npm
curl -sL https://rpm.nodesource.com/setup_18.x | sudo -E bash -
yum -y install nodejs npm

我的start_server.sh：

#!/bin/bash

# navigate to app folder
cd /janus-ui

pm2 start npm --name "janus-ui" -- run prod
pm2 startup
pm2 save
pm2 restart all

package.json 中的我的脚本

"scripts": {
    "dev": "env-cmd -f .env.development vite --port 5173",
    "prod": "env-cmd -f .env.production vite --port 5173",
    "build": "vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

我的buildspec.yml：

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 18
   
    commands:
        # install npm
        - npm install
       
  build:
    commands:
        # run build script
        - npm run-script build
     
artifacts:
  # include all files required to run application
  # notably excluded is node_modules, as this will cause overwrite error on deploy
  files:
    - dist/**/*
    - src/**/*
    - package.json
    - appspec.yml
    - index.html
    - tsconfig.json
    - tsconfig.node.json
    - vite.config.ts
    - scripts/**/*
    - .env.production

通常我会卡住。我第一次这样做，我尝试了 nginx，现在 pm2 看起来更容易，但即使日志看起来一切正确，我仍然无法访问。

我希望通过浏览器在“public-ip:5173”上看到我的页面

Answer 1

总结

要运行 React Web 应用程序，您需要一个 http 服务器。 React 附带了一个小型服务器，仅用于开发（npm run dev），但不适用于生产（对于真实用户）环境。

我将向您展示一些从手动到自动的选项

Ec2 端口

默认情况下 ec2 打开 80 端口。因此，如果您在此端口中运行您的 Web（java、react、php、python 等），您应该能够使用 aws 提供的公共域来访问它。类似的东西

http://ec2-aa-bb-cc-131.compute-1.amazonaws.com

图片来源：https://mkyong.com/server/namecheap-domain-name-and-amazon-ec2/

反应构建

无论您选择哪个选项，您都需要在提供应用程序之前构建应用程序。通常是

npm run build

做到的。检查 dist 文件夹中是否有您的带有 javascript 的 Web 缩小版。喜欢：

阿帕奇

几乎所有 Linux 机器都默认有这个工具。基本上，您需要将 dist 文件夹内容复制到某个 apache 文件夹，然后启动它。默认情况下，apache 使用 80 端口，因此与您的 ec2 的 80 匹配