OpenFaaS部署前端
OpenFaaS系列文章：
WSL中OpenFaaS开发环境配置
OpenFaaS部署前端
OpenFaaS开发后端curd接口
接上文：https://blog.csdn.net/qq_45574633/article/details/122513227?spm=1001.2014.3001.5501
开发Web项目时，OpenFaaS也可以用于托管前端项目。
部署前端项目主要有两种方式
- 基于node10-express模板，手动编写handler，通过express.js给前端静态文件提供服务。
github上有一个采用这种类型部署的应用https://github.com/alexellis/leaderboard-app
- 参考static-site-template模板，手动编写dockerfile，通过nginx提供服务
由于采用第一种方式部署react项目会有一些问题，而且需要提前打包前端文件，因此本文采用第二种方式部署。
github上参考项目有https://github.com/Janaka-Steph/openfaas-nginx-react
创建项目
创建faas function
本文基于openfaas官方提供的dockerfile模板，手动编写dockerfile文件打包部署react项目
创建项目目录
mkdir openfaas-react-demo
cd openfaas-react-demo
从官方模板仓库拉取模板
实际使用的模板只有dockerfile模板，也可以新建template目录并将dockerfile模板复制进去
faas-cli template pull
创建faas function，指明模板为dockerfile
faas-cli new --lang dockerfile demo
创建react项目
采用create-react-app创建react示例项目
先删除demo/Dockerfile文件，留下一个空目录
rm demo/Dockerfile
创建项目
create-react-app demo
cd demo
采用yarn的方式
rm package-lock.json
yarn
完成后运行项目
yarn start
进入localhost:3000查看项目创建成功
也可将一个已有的项目复制进去
编写Dockerfile
创建完成后需要编写Dockerfile文件
进入demo目录下，创建Dockerfile
FROM --platform=${TARGETPLATFORM:-linux/amd64} ghcr.io/openfaas/of-watchdog:0.9.2 as watchdog
FROM --platform=${TARGETPLATFORM:-linux/amd64} node:16-alpine AS build
# 打包项目
WORKDIR /root
COPY ./package*.json ./
RUN yarn
COPY . .
RUN yarn build
# 或使用npm
# RUN npm install
# COPY . .
# RUN npm build
FROM --platform=${TARGETPLATFORM:-linux/amd64} nginxinc/nginx-unprivileged:1.20-alpine AS runtime
USER root
COPY --from=watchdog /fwatchdog /usr/bin/fwatchdog
RUN chmod +x /usr/bin/fwatchdog
# 将打包好的文件复制进去，如果使用vue则复制dist
WORKDIR /usr/share/nginx/html
COPY --from=build /root/build .
# 将下文创建的nginx配置文件复制进去
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
RUN echo -n "daemon off;" | tee -a /etc/nginx/nginx.conf
ENV fprocess="nginx"
ENV mode="http"
ENV upstream_url="http://127.0.0.1:8000" # watchdog转发请求的url，端口和nginx的配置文件相同
RUN chown -R nginx:nginx *
USER nginx
CMD ["/usr/bin/fwatchdog"]
同时创建.dockerignore文件排除掉node_modules和build
/node_modules
/build
Nginx配置文件
demo目录下，创建nginx目录，进入nginx目录创建default.conf
server {
listen 8000; # 端口和Dockerfile中对应
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
#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;
}
}
编写.env
由于前端运行在一个function路径下，因此需要写明PUBLIC_URL否则无法请求到正确的js、css文件。
在demo目录下创建.env文件
PUBLIC_URL=/function/demo
对应根目录下的demo.yml中的函数名
demo.yml文件中需要给image加上dockerhub用户名，用于推送镜像到docker hub
version: 1.0
provider:
name: openfaas
gateway: http://localhost:31112
functions:
demo:
lang: dockerfile
handler: ./demo
image: ${dockerhub user name}/demo:latest
部署
返回根目录下，执行命令部署
可以首先执行
docker login
确保已登录
使用faas-cli命令部署
faas-cli build -f demo.yml
faas-cli push -f demo.yml
faas-cli deploy -f demo.yml
也可以直接使用一条命令部署，代替上面三条命令
faas-cli up -f demo.yml
显示Accepted部署成功
Deploying: demo.
Deployed. 202 Accepted.
URL: http://localhost:31112/function/demo
浏览器打开url可以看到React欢迎界面
本文样例地址：
https://github.com/lbaf23/openfaas-react-demo
对于这种方式部署的react项目，在编写页面路由、页面跳转的时候同样需要加PUBLIC_URL前缀，可以通过
const public_url = process.env.PUBLIC_URL获取.env文件中的环境变量