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文件中的环境变量