从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文件所在目录

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

  1. 对nginx配置,使其正常访问
  2. 调整nginx配置,刷新前端路由能正常访问
  3. 调整nginx配置,使demo页跨域访问外部接口,控制台显示 接口数据
DOCTYPE html>
<html>
  <head>
    <title>Demotitle>
    <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="/foo">Go to Foorouter-link>
        <router-link to="/bar">Go to Barrouter-link>
        <button @click="getData">点击获取数据button>
        <button @click="getHotel">点击获取酒店button>
      p>
      
      
      <router-view>router-view>
    div>
    <script>
      const Foo = { template: "
foo
"
}; const Bar = { template: "
bar
"
}; // 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的面板上操作以上命令

从nginx静态服务搭建打包到docker管理前端应用_第1张图片

你可能感兴趣的:(前端,nginx,docker)