从nginx静态服务搭建打包到docker管理前端应用

鱼泡泡~

已于 2022-02-22 18:01:54 修改

阅读量1.9k

点赞数

文章标签：前端 nginx docker

于 2022-02-21 17:28:37 首次发布

本文链接：https://blog.csdn.net/qq_42308316/article/details/123050774

版权

一.安装Nginx，并启动

Nginx是一个高性能的HTTP和反向代理web服务器,也可以用来做负载均衡

brew install nginx # 安装
nginx # 启动
nginx -s nginx  # 停止
nginx -s reload # 重启
brew info nginx # nginx安装信息
cd opt/homebrew/Cellar/nginx # nginx被安装的目录
cat opt/homebrew/etc/nginx/nginx.conf #  nginx.conf文件所在目录

二. 将spa应用配置到nginx并访问

对nginx配置,使其正常访问
调整nginx配置，刷新前端路由能正常访问
调整nginx配置，使demo页跨域访问外部接口，控制台显示接口数据

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="x-rim-auto-match" content="none" />
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
  </head>
  <body>
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
        <button @click="getData">点击获取数据</button>
        <button @click="getHotel">点击获取酒店</button>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
    <script>
      const Foo = { template: "<div>foo</div>" };
      const Bar = { template: "<div>bar</div>" };
      // 2. 定义路由
      // 每个路由应该映射一个组件。 其中"component" 可以是
      // 通过 Vue.extend() 创建的组件构造器，
      // 或者，只是一个组件配置对象。
      // 我们晚点再讨论嵌套路由。
      const routes = [
        { path: "/foo", component: Foo },
        { path: "/bar", component: Bar },
      ];
      // 3. 创建 router 实例，然后传 `routes` 配置
      // 你还可以传别的配置参数, 不过先这么简单着吧。
      const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHistory(),
        routes, // `routes: routes` 的缩写
      });
      // 4. 创建并挂载根实例
      const app = Vue.createApp({
        methods: {
          getData: async function (e) {
            fetch("/api/health/").then((response) =>
              console.log("apiRes:", response)
            );
          },
        },
      });
      //确保 _use_ 路由实例使
      //整个应用支持路由。
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>

# nginx.conf
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8088;
        server_name  localhost;
        location / {
        	# nginx.confg中修改location中的root为demo的绝对路径
            root  /opt/homebrew/var/www/demo; 
            index index.html index.html;
            # 解决刷新404问题 $uri 是 ngnix 的变量，存放着用户访问地址。对应端口后的路径 按顺序读取，最后一个兜底
            try_files $uri $uri/ /index.html;
            #开启目录文件列表
            autoindex on;  
        }
        location /api {
            proxy_pass  https://hotel-international.fast-cn.wgine.com;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    include servers/*;
}

三. 安装`Docker`并将包含demo spa 的nginx打包到docker，在本地启动访问

Docker 是一个开源的应用容器引擎，基于Go 语言并遵从 Apache2.0 协议开源。

Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。

容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。

安装docker

brew install --cask docker # 安装docker

创建并配置构建镜像的文本文件`Dockerfile`

# 基于nginx
FROM nginx 
# 将本地的nginx配置 拷贝到docker对应的nginx上
COPY ./nginx.conf /etc/nginx/nginx.conf 
# 将单页面应用 拷贝到容器nginx对应的地方
COPY ./index.html /usr/share/nginx/html 
# 标明该应用端口地址 无实际意义
EXPOSE 8088

使用`docker image build`根据Dockerfile打包成镜像

docker image build ./ -t docker-test:1.0.1

使用`docker container create`根据镜像创景容器

docker container create -p 3001:8088 docker-test:1.0.1

使用`docker container start`根据镜像创景容器

docker container start xxx # xxx 为上一条命令运行得到的结果，也就是容器id

也可以在docker的面板上操作以上命令
请添加图片描述

鱼泡泡~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从nginx静态服务搭建打包到docker管理前端应用

一.安装Nginx，并启动Nginx是一个高性能的HTTP和反向代理web服务器,也可以用来做负载均衡brew install nginx # 安装nginx # 启动nginx -s nginx # 停止nginx -s reload # 重启brew info nginx # nginx安装信息cd opt/homebrew/Cellar/nginx # nginx被安装的目录cat opt/homebrew/etc/nginx/nginx.conf # nginx.conf文件所在
复制链接

扫一扫