NextJS项目的部署以及多环境的实现 - 绛绛
source link: https://www.cnblogs.com/chrystal/p/17520076.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
开发了个Next项目,将部署过程记录一下。另外由于项目准备了两个服务器分别作为开发自测的开发环境和交付给客户的生产环境使用;因此也介绍一下NextJS项目中多环境的配置。
计划是让Nginx根据不同的路径前缀决定请求发给哪个后端;而路径前缀则是由Docker打包镜像的时候传递参数给Next App作为环境变量。
设置next.config.js
#
导出静态文件#
我们需要Next项目编译后的文件,这需要我们把next.config.js
中加上output: "export"
设置,这样我们在运行next build
命令后,Next会生成一个静态资源文件夹out
,如图:
⚠️注意事项
在output: "export"
模式下无法使用rewrites
或者headers
等设置,官方文档列出的完整不支持的功能如下:
设置环境变量#
如上文提到,Nginx需要根据不同的路径前缀来决定请求哪个后端,那么就需要前端去判断当前是什么环境再设定当前的请求的路径前缀。
-
根据NODE_ENV判断当前环境【已失败】
计划是当
NODE_ENV
为production
的时候,请求前缀为/prod
;当NODE_ENV
为development
的时候则为/dev。实施的时候却发现next build
和next start
这两条命令都会默认设置NODE_ENV
为production
。因此当我使用cross-env在运行命令时设置NODE_ENV
为development
就失败了(如图)。
这么设置,运行npm run dev
后获取到的process.env.NODE_ENV
还是production
。
后来看到有网友说可以通过webpack的DefinePlugin插件来创建全局变量,从而改变环境。参考链接:使用process.env.NODE_ENV的正确姿势
-
自定义环境变量
发现NODE_ENV会被
next build
和next start
这两条命令修改的时候,我就决定使用别的环境变量来区别本项目的开发环境与生产环境。
注意,在这里设置的环境变量API是无法在业务代码中直接访问的。如果此时在业务代码中使用process.env.API
会得到undefined
的值。
因此我在next.config.js处添加了环境变量的设置,将scripts这里设置的API变量传递给Next项目里,如图:
使用方式如下:
这样就成功设置好了环境变量,让项目根据不同环境,请求带上不同的前缀。
next.config.js
文件配置示例:#
const nextConfig = {
output: "export", // 打包模式
reactStrictMode: true,
images: {
unoptimized: true,
},
env: {
API_PREFIX: process.env.API,
},
// async rewrites() {
// return [
// {
// source: "/api/:path*",
// destination: "http://domain:8000/:path*",
// },
// ];
// }, // 本地调试时使用
};
module.exports = nextConfig;
设置nginx.conf
#
Nginx的设置没啥特别的,就是根据不同前缀把请求转发到不同服务器上,下面是我用的配置:
server {
listen 80;
server_name localhost;
gzip on;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri.html /$uri /index.html;
}
location /dev/ {
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_set_header Host $http_host;
proxy_pass http://domain1:8000/; # 开发环境
}
location /prod/ {
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_set_header Host $http_host;
proxy_pass http://domain2:8000/; # 生产环境
}
# error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
其中要特别注意try_files $uri $uri.html /$uri /index.html;
这条配置。其他前端项目大部分配置的都是try_files $uri $uri/ /index.html;
,但是Next项目比较特殊,观察它打包后的文件可以发现规律,这里不赘述。
配置Dockerfile
#
这里用的 Dockerfile
也没啥特别的,就是把Next项目编译好的静态文件复制到/usr/share/nginx/html
,让Nginx进行静态代理,最后启动Nginx。其中我用了ENV
参数来区分前端的两个环境,ENV
可以有两个值:dev
和prod
。
使用—build-arg
就能传递参数,示例:
docker build --build-arg ENV=dev -t domain/frontend:test-v0.1 .
完整的Dockerfile
配置如下:
FROM node:16-alpine as build
ARG ENV
RUN npm config set registry https://registry.npm.taobao.org \
&& npm i npm -g
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run ${ENV}
FROM nginx:alpine
COPY --from=build /app/out /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT nginx -g "daemon off;"
所有部署文件都已经完成了,得到docker镜像后,不管是部署到K8s的集群上面还是自己启动一个docker容器都很简单,在这里就忽略了。最后的部署效果完美地实现了我的目的:开发环境的请求前缀都有/dev,也成功请求到了开发环境的那台后端服务器。
Recommend
-
123
在软件开发和部署过程中,我们的软件往往需要在不同的运行环境中运行,例如:开发人员本地开发环境、测试团队的测试环境、生产仿真环境、正式生产环境,不同的公司可能还会有更多的环境需要对项目配置进行动态切换。项目在这些环境切换的过程中,往往会有一部分...
-
11
Unity3D项目环境全部署Unity3D项目环境全部署。这次我想总结下项目环境部署。可别小看了这个开发环境部署,这将直接导致项目的进程速度,以及成员们在这个开发行程中的疲劳积累速度。优秀的部署能省去成员们不必要的心理负担,卸下包袱专心去做自己的...
-
7
Docker运行nginx以及部署Vue项目的一些问题 拉取、部署nginx镜像拉取镜像:docke...
-
1
【.NET+MQTT】.NET6 环境下实现MQTT通信,以及服务端、客户端的双边消息订阅与发布的代码演示 前言: MQTT广泛应...
-
6
这是今年1月24日的旧文,发现没在这里发过,就搬运过来了。 声明# 本文讨论的使用场景主要为
-
1
问题描述:# 启动前端后,发现前端的页面渲染不符合预期,看情况应该是css文件没有生效。
-
3
在Centos7.6上部署Docker环境以及安装docker-compose首页 - Mac & Linux/2019-08-21 毫无疑问,Do...
-
6
有时候前端开发需要使用到一些特殊字体,但宿主机上一般都没有安装相应的字体,所以需要将字体文件与前端代码一起打包以及用 CSS 定义使用。本文主要是想回答一个问题:在性能方面,我们可以怎么去优化前端需要加载的字体? 一般优化的思路主要是两方面:...
-
3
V2EX › 程序员 Nextjs 如何访问后端服务的 API 以及如何跨域?
-
5
【前端工程化】Nextjs项目工程化最佳实践总结(献给2023-1024的礼物)时间已经是2023年了,马上也2024年了,自己去Web3世界闯荡已经一年多了。记得两年前在写文章的时候,发现自己对新领域的狂热在减弱,但是经过在新领域的锤炼,仿佛换起来自己的新狂热程...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK