使用vue+nginx+dockerfile+docker-compose 发布静态网页（简单到爆）

源码：https://github.com/oopxiajun/vue_nginx_dockerfile_docker-compose

docker-compose.yaml 内容

# cat docker-compose.yaml 
version: '2'
services:
  myvueweb:
    build: .
    ports:
      - "3000:80"
    image: myvueweb

nginx.conf

# cat nginx.conf 
worker_processes auto; 
events {
    worker_connections  1024;
} 
http {
    include       mime.types;
    default_type  application/octet-stream; 
    sendfile        on; 
    keepalive_timeout  65; 
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  localhost; 
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        } 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        } 
    } 
}

Dockerfile 内容

# 设置基础镜像 
FROM nginx:latest
# 定义作者
MAINTAINER oopxiajun <[email protected]>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'

启动

docker-compose -f docker-compose.yaml up --build -d

看看容器

# docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
d75fca406d3d        myvueweb            "nginx -g 'daemon ..."   17 minutes ago      Up 17 minutes       0.0.0.0:3000->80/tcp   myvue_myvueweb_1

看看镜像

# docker images
REPOSITORY                               TAG                 IMAGE ID            CREATED             SIZE
myvueweb                                 latest              9c6bd8a60bbb        22 minutes ago      127 MB

访问网页

# curl http://192.168.134.129:3000
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>VuejsApp1</title><link href=/js/app.43e89baa.js rel=preload as=script><link href=/js/chunk-vendors.d9eb519d.js rel=preload as=script></head><body><noscript><strong>We're sorry but VuejsApp1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.d9eb519d.js></script><script src=/js/app.43e89baa.js></script></body></html>

是不是简单到爆呀

扫描二维码关注公众号，回复： 11266247 查看本文章

使用vue+nginx+dockerfile+docker-compose 发布静态网页（简单到爆）

猜你喜欢