Linux平台下docker vue项目镜像 运行

docker 入门可参考 链接地址

Vue项目初始化

vue create vue-test-docker

npm run build

根目录新建 default.conf Dockerfile

default.conf

# nginx配置
server {
    # 可以写 80 最后运行可以重新映射
    listen       80;
    server_name  localhost;
 
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
 
    location / {
        # root 根目录，默认nginx镜像的html文件夹，可以指定其他
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 如果vue-router使用的是history模式，需要设置这个 
        try_files $uri $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;
    }
}

Dockerfile

# 设置基础镜像 :latest 版本号
FROM nginx:latest 
 
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
 
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY default.conf /etc/nginx/conf.d/default.conf

为什么文件夹位置是那样的，nginx默认配置就是如此。当然前提对nginx有一定的了解。

如果Dockerfile配置文件中要FORM一个没有你拉过的镜像，到时会拉一份出来。比如你原来docker images 中没有nginx镜像，到时会拉一份镜像。

打包镜像

sudo docker build -t vue-test .  # vue-test 为镜像名称 可以 vue-test:版本号

运行

sudo docker run --name vue-test-c -d -it -p 8080:80 vue-test #### vue-test-c 为运行容器name

此刻一个简单的vue项目,运行容器搭建OK

如果你想看容器里有没有你配置项，比如nginx配置项(文件)

docker exec -t 容器ID  bash
find --name nginx

说道修改一种暴力手法就是删掉，重新配置

有个方法，讲相关配置cp -a 一份到指定位置，在 -v命令映射，我试过，没成功。如果有哪位大佬知道，在此拜谢。

SSR NUXT.JS

Dockerfile

FROM node:8.2.1
MAINTAINER stark.wang

ENV NODE_ENV=production
ENV HOST 0.0.0.0

RUN mkdir -p /app
COPY . /app
WORKDIR /app
# Expose the app port
EXPOSE 3000

#If the environment in China build please open the following comments
#如果在中国环境下构建请把下面注释打开
#RUN npm config set registry https://registry.npm.taobao.org

RUN npm install
RUN npm run build
CMD ["npm", "start"]

运行

# build image
$ docker build -t nuxt-demo .

# serve at localhost:8080
$ docker run -dt -p 8080:3000 nuxt-p

该方案参考某大佬 链接地址

此方案把源码也部署上去，如果不需要源码，
.nuxt static nuxt.config.js package.json Dockerfile

FROM node

ENV NODE_ENV=production
ENV HOST 0.0.0.0
RUN mkdir -p /app
COPY . /app
WORKDIR /app
EXPOSE 8080
#此为cnpm淘宝镜像
RUN npm config set registry https://registry.npm.taobao.org
RUN npm install
CMD ["npm", "start"]

来来来，彩蛋

docker run -d -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 --name mysql mysql:latest

docker run -itd --name redis-test -p 6379:6379 redis