我有一个Vite Reaction应用程序,它使用环境变量与API对话:

const API_URL = import.meta.env.VITE_API_URL;

我正在使用以下Dockerfile将此应用程序部署到Fly.io:

FROM node:18 as build

WORKDIR /web

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:alpine

COPY --from=build /web/dist /usr/share/nginx/html

# This needs be referenced in fly.toml's internal_port
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

我在Fly.io容器的env中设置了VITE_API_URL,并判断了它是否存在.

然而,当我部署这款应用程序时,API_URL最终变成了undefined.我认为这与ngix无法访问它有关.

我在开发时部署了另一个Dockerfile:

FROM node:18

WORKDIR /web

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 5173

CMD ["npm", "run", "dev"]

这个可以访问Fly.io的秘密/环境变量.我怀疑这是因为我正在使用npm run dev直接运行VITE代码.但是现在我正在通过nginx运行它,我想我可能需要做一些不同的事情来访问相同的环境变量?

推荐答案

维特需要environment variablesbuild time.

你有两个 Select .

  1. 在您的Docker版本中添加一个.env.production文件.例如

    # .env.production
    VITE_API_URL=https://your.production.api/
    
  2. 将构建参数传递给fly deploy命令并使用它来设置环境变量

    fly deploy --build-arg API_URL="https://your.production.api/"
    
    # Dockerfile
    FROM node:18 as build
    WORKDIR /web
    COPY package*.json ./
    RUN npm install
    COPY . .
    
    ARG API_URL
    ENV VITE_API_URL=${API_URL}
    RUN npm run build
    

    我想你也可以在你的fly.toml[build.args]以下,如果你喜欢的话

Typescript相关问答推荐

如何根据参数的值缩小函数内的返回类型?

如何将绑定到实例的类方法复制到类型脚本中的普通对象?

我们过go 不能从TypeScript中的联合中同时访问所有属性?

打印脚本丢失函数的泛型上下文

类型{}上不存在属性&STORE&A;-MobX&A;REACT&A;TYPE脚本

状态更新后未触发特定元素的Reaction CSS转换

使用2个泛型类型参数透明地处理函数中的联合类型

用于验证字符串变量的接口成员

使用Redux Saga操作通道对操作进行排序不起作用

笛卡尔产品类型

保护函数调用,以便深度嵌套的对象具有必须与同级属性函数cargument的类型匹配的键

重载函数的T helper参数

确保对象列表在编译时在类型脚本中具有唯一键

如何在脚本中输入具有不同数量的泛型类型变量的函数?

如何使用TypeScrip在EXPO路由链路组件中使用动态路由?

可以用任意类型实例化,该类型可能与

如何使对象同时具有隐式和显式类型

通过函数传递确切的类型,但验证额外的字段

为什么过滤器不改变可能的类型?

如果父级被删除或删除,如何自动删除子级?