Stencil JS部署至Ubuntu Nginx VPS后API请求异常问题咨询

1. 替换硬编码API地址为环境变量（根治硬编码问题） #

Stencil支持通过环境变量区分开发/生产环境的API地址，避免硬编码导致的部署偏差：

• 在项目根目录创建.env文件，开发环境配置：

  API_URL=http://localhost:3000/api/v2
  

  部署到VPS前，修改为生产环境配置：

  API_URL=https://mydomain.com/api/v2
  

• 在stencil.config.ts中注入环境变量：

  import { Config } from '@stencil/core';
  
  export const config: Config = {
    // 其他原有配置...
    env: {
      apiUrl: process.env.API_URL || 'http://localhost:3000/api/v2'
    }
  };
  

• 在组件中调用环境变量发起请求：

  import { getConfig } from '@stencil/core';
  
  const apiUrl = getConfig().env.apiUrl;
  // 示例请求：`${apiUrl}/${userId}`
  

2. 配置Nginx反向代理（安全且避免跨域） #

直接暴露3000端口既不安全也易触发跨域，用Nginx将域名下的/api路径转发到本地API：

• 编辑Nginx站点配置文件（如/etc/nginx/sites-available/mydomain.com）：

  server {
    listen 80;
    server_name mydomain.com;
  
    # 指向Stencil构建后的静态文件目录
    root /var/www/mydomain.com/dist;
    index index.html;
  
    # 反向代理API请求
    location /api/ {
      proxy_pass http://localhost:3000/api/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  
    # 处理单页应用路由 fallback
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

• 验证配置并重启Nginx：

  sudo nginx -t
  sudo systemctl restart nginx
  

3. 修正Express API的绑定地址 #

如果API仅绑定127.0.0.1，即使Nginx在本机也无法访问，修改Express启动代码：

// 替换原有的 app.listen(3000, '127.0.0.1', ...)
app.listen(3000, '0.0.0.0', () => {
  console.log('API已启动在3000端口');
});

4. 验证防火墙与安全组配置 #

• 若需外部直接访问API，开放Ubuntu本地防火墙3000端口：

  sudo ufw allow 3000/tcp
  sudo ufw reload
  

• 检查云服务商安全组，确保80/443端口（反向代理方式）或3000端口（直接访问API）已开放。

5. 处理跨域问题（若直接用VPS IP访问API） #

如果必须使用http://vpsIP:3000，在Express中配置CORS允许域名请求：

const cors = require('cors');
// 仅允许mydomain.com发起请求
app.use(cors({ origin: 'https://mydomain.com' }));

内容的提问来源于stack exchange，提问作者Kyle Styx