由于项目需要部署到服务器上面,这两天捣鼓了一下docker和nginx,给我最大的感觉对linux更加熟练了…(之前完全没有接触过linux)。期间真的踩了很多坑,在这里吐槽一下…然后简单描述一下怎么利用docker安装nginx部署vue项目。
1.登录服务器,同时安装docker。
docker安装我用了简单粗暴的一键安装:
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
可以参考菜鸟教程,上面的安装都很详细,这里一笔带过。
参考链接:https://www.runoob.com/docker/ubuntu-docker-install.html
2.拉取nginx镜像。
为了拉取镜像的速度可以更快一点,可以使用阿里云服务器的代理,具体方式可以参考
https://blog.csdn.net/wohaqiyi/article/details/89335932
使用到阿里云服务器代理后,开始拉取镜像:
docker pull nginx
拉取完毕后,通过docker images
查看是否拉取了镜像。
3.进行docker结合nginx测试(这一步是为了检查nginx是否能够在服务器中运行成功)
输入命令
docker run -d -p 8080:80 --name my-nginx nginx
解释一下命令的含义:
-d ----在后台持续运行
-p ----指定端口号
--name ----指定容器的名称(如果没有这个命令,docker将随机命名)
nginx ----使用nginx镜像
接着终端会出现一串东西,这串东西是docker容器的id。
使用docker ps
可以查看容器是否运行着。(docker ps -a
查看所有的容器)
如果容器运行着,在浏览器输入服务器ip地址:8080
,如果正常的话,会跳转到nginx的起始页面,说明nginx在服务器上已经跑起来了。
注意:在使用8080端口的时候,一定要注意防火墙的设置以及服务器的安全组有没有默认放开,根据自己的需要指定。
4.进行相关文件的映射(这步真的很重要…)
映射是镜像中的文件,映射到服务器我们熟知的位置中,当服务器的文件发生改变的时候,镜像中的文件也会发生变化,方便我们修改,尤其是配置文件。
首先创建一些相关的文件夹(文件结构如下):
home
yanwuhc
nginx
conf.d
html
log
相关linux命令:
cd
–进入文件夹
mkdir
创建文件夹
ls
列出某个文件夹中的所有东西
rm -rf 文件/文件夹名字
删除这个文件/文件夹(谨慎使用!删除后不能恢复)
创建完毕后,在conf.d中创建一个名字为default.conf的文件,内容是:
server {
listen 80;
server_name localhost;
# 默认配置,匹配根路径,可以修改index.html的名字,用于区分该配置文件替换了容器中的配置文件
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
相关linux命令:
vi default.conf
在当前文件下创建default文件同时编辑。
进入之后:
i
进入编辑状态
esc退出编辑状态
:wq
保存并退出
同时,我们要在html文件夹中创建一个index.html文件,内容可以是随意,用作测试。
<html>
<body>
<h1>
hello world!
</h1>
</body>
</html>
接着是映射,把镜像中的conf文件和html映射出来:
docker run -d -p 80:80 --name my-nginx
-v /home/yanwuhc/nginx/conf.d:/etc/nginx/conf.d
-v /home/yanwuhc/nginx/html:/usr/share/nginx/html
-v /home/yanwuhc/nginx/log:/var/log/nginx nginx
快捷复制:
docker run -d -p 80:80 --name my-nginx -v /home/yanwuhc/nginx/conf.d:/etc/nginx/conf.d -v /home/yanwuhc/nginx/html:/usr/share/nginx/html -v /home/yanwuhc/nginx/log:/var/log/nginx nginx
/etc/nginx/conf.d
和/usr/share/nginx/html
和/var/log/nginx
是nginx镜像的默认路径。
这里我用80端口作映射,因此在映射前需要检查80端口是否被容器占用,如果是的话要先停掉相关的容器。
docker ps 找到占用80端口的容器的id或者名字
docker stop 容器的id或者名字
映射完成后,打开浏览器输入服务器的ip,可以看到测试index.html显示出来了。
5.项目的正式部署。
前面在只是服务器的一些准备工作和相关测试,下面是重点。首先在本地打包好自己的项目,生成dist文件上传到服务器中,位置可以任意,我选择了上传到之前的html文件下面。
npm run build
相关linux命令:
rz
上传
unzip zipfilename.zip
在当前位置解压zip文件
接着可以将解压的文件映射到80端口上,这样浏览器直接输入ip就行了。在这里要注意两个事项:
1.80端口是否被相关容器占用,是的话停掉相关的容器。
2.映射的位置必须是项目的根目录!(这点尤其重要)
由于我的项目文件结构式是这样的:
home
yanwuhc
nginx
conf.d
html
dist
index.html
favicon.ico
assets
所以我在html文件位置下输入命令:
docker run -d -p 80:80 -v $PWD/dist:/usr/share/nginx/html nginx
用docker ps
查看容器是否运行起来,如果运行成功了,浏览器输入服务器ip地址,可以看到项目跑起来了。