Linux平臺下docker vue項目鏡像 運行

docker nginx 服務 入門可參考 鏈接地址

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

# 設置基礎鏡像
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

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

該方案參考某大佬 鏈接地址

來來來，彩蛋

docker run -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --lower_case_table_names=1