docker + nginx 部署vuejs3.0项目
1:用指令 npm run build 打包vusjs项目(该项目是在github上下载的)。打包成功后会生成一个目录dist。
2:把该文件夹拷贝到腾讯云服务器(操作系统 centos7)下的/usr/share目录下。
3:在/usr/share目录下新建Dockerfile文件
dockerfile文件内容:
# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER longdb
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'
4:新建文件 nginx.conf。
文件内容:
worker_processes auto;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info; #pid logs/nginx.pid; events {
worker_connections 1024;
} http {
include mime.types;
default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on;
#tcp_nopush on; #keepalive_timeout 0;
keepalive_timeout 65; #gzip on; client_max_body_size 20m;
server {
listen 80;
server_name www.longdb.com; #charset koi8-r; #access_log logs/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
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 html;
} # proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#} # deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
} # another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias; # location / {
# root html;
# index index.html index.htm;
# }
#} }
5:cd 进入share目录,然后 用括号里指令(docker build -t longdb-vue:V1.0.0 . )构建镜像。(注意最后的 . )
6:运行生成成功的镜像:docker run -p 3000:80 -d --name longdbvuejs 34d9e8770f1b
参数讲解:
run: 创建一个新的容器并运行一个命令
-d: 后台运行容器,并返回容器ID
-p: 端口映射,格式为:主机(宿主)端口:容器端口
--name="longdbvuejs": 为容器指定一个名称
34d9e8770f1b --为生成好的images_id.
7:docker ps 指令查看有哪些在运行,上图中看到longvuejs在运行。(测试 http://193.112.82.83:3000/#/page2)
结果如下:
参考文章:https://blog.csdn.net/g631521612/article/details/82841282
2019.8.10 added:部署好后,目录dist下的内容可以删掉。
docker + nginx 部署vuejs3.0项目的更多相关文章
- docker 中部署一个springBoot项目
docker 中部署一个springBoot项目 (1)介绍 springBoot项目 1.项目结构 2.pom.xml <?xml version="1.0" encodi ...
- Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx)
Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx) 一丶集群和Nginx反向代理 ...
- Centos7 部署.netCore2.0项目
最近在学习.netCore2.0,学习了在Centos上部署.netCore的方法,中间遇到过坑,特意贴出来供大家分享,在此我只是简单的在CentOS上运行.NETCore网站,没有运用到nginx等 ...
- Linux +Docker +Nginx 部署代理转发初探
很多开发人员仅仅只会码代码,如果让开发人员部署一些深入点的东西,或者做负载均衡等,很多开发人员估计就懵逼了,作为一个专业的开发还需要懂一些基本的运维知识:虽然说在互联网行业中,中小企业都有一个牛逼的运 ...
- jenkins+docker+nginx+tomcat实现vue项目部署
一.项目准备 1.新建一个vue的项目,确保能在浏览器正常访问.然后在项目的根目录下新建一个Dockerfile的文件,内容如下 FROM nginx COPY dist /usr/share/ngi ...
- 在centos7.4 nginx mysql php部署 thinkphp5.0 项目
系统 centos7 环境 php 7.1.3 nignx 1.12.2 mysql 5.5.6 我是通过lnmp 集成环境安装 fastcgi.conf 末尾添加 vim fastcig.conf ...
- Docker+Nginx部署Angular
在部署Angular生产环境之前,需要电脑已经安装docker. 添加Dockerfile在已经完成的Angular项目的项目根目录下添加Dockerfile文件. Dockerfile文件内容: F ...
- Centos8 Docker+Nginx部署Asp.Net Core Nginx正向代理与反向代理 负载均衡实现无状态更新
首先了解Nginx 相关介绍(正向代理和反向代理区别) 所谓代理就是一个代表.一个渠道: 此时就涉及到两个角色,一个是被代理角色,一个是目标角色,被代理角色通过这个代理访问目标角色完成一些任务的过程称 ...
- 在Docker中部署Spring Boot项目
想要获取更多文章可以访问我的博客 - 代码无止境. 微服务现在在互联网公司可谓非常流行了,之前找工作的的时候很多HR电话约面试的时候都会问对微服务是否有过接触.而微服务和Docker可以非常完美的结合 ...
随机推荐
- Smart Pointe
http://blog.chinaunix.net/uid-625789-id-2720884.html
- 使用 John the Ripper 破解 Windows 密码
cd /target/windows/system32/config 使用 SamDump2 来提取哈希,并将文件放到你的 root 用户目录中的一个叫做 hashes 的 文件夹中. samdump ...
- 查看OpenGL版本信息
查看OpenGL版本信息 执行如下代码 #include "stdafx.h" #include <iostream> #include <gl/glut.h&g ...
- Android-自定义TabHost
效果图: 布局代码相关: <!-- 自定义简单的TabHost选项卡 --> <LinearLayout xmlns:android="http://schemas.and ...
- day14(带参装饰器,迭代器,生成器,枚举对象)
一,复习 ''' 函数的嵌套定义:在函数内部定义另一个函数 闭包:被嵌套的函数 -- 1.外层通过形参给内层函数传参 -- 2.验证执行 开放封闭原则: 功能可以拓展,但源代码与调用方式都不可以改变 ...
- .net使用QQ邮箱发送邮件
/// <summary> /// 发送邮件 /// </summary> /// <param name="mailTo">要发送的邮箱< ...
- C# Using 开发随录
Using 关键字有2个主要用途: 1.做为语句 用于定义一个范围,在此范围的末尾将释放对象 2.做为指令 用于为命名空间创建别名或导入其他命名空间中定义的类型 C# 通过 .NET Framew ...
- django drf 自定义jwt用户验证逻辑
新建Backend类 from django.contrib.auth.backends import ModelBackend from django.shortcuts import render ...
- Js异常捕获
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- sharepoint 2013 补丁升级步骤
1. 安装过程合理: A. 可以同时在管理中心.两台前端.搜索服务器上安装重新发布的SP1补丁包(所提供的链接) B. 等待所有SP1补丁包安装完成,依次在管理中心.两台前端.搜索服务器上运行配置向导 ...