デプロイする前にサーバーにDockerがインストールされていることを確認してください
docker installation: https://www.runoob.com/docker/ubuntu-docker-install.html
docker deploymentを使用
①コンテナを作成
docker run --name myNginx -p 8001:80 -d nginx
• docker run : 创建并运行一个容器
• –name : 给容器起一个名字, 比如叫做 myNginx
• -p : 将宿主机端口与容器端口映射, 冒号左侧是宿主机端口, 右侧是docker容器端口
• -d : 后台运行容器
• nginx : 镜像名称 , 例如nginx
注：上面宿主机端口可以改成自己想映射的端口
ここで、コンテナーはオペレーティング システムのないホストであり、ミラーはオペレーティング システムであることが簡単に理解できます。イメージがコンテナーにインストールされると、コンテナーは完全なホストと見なすことができます。
eg:docker run --name development_test -p 8001:80 -d nginx
コンテナーが正常に作成され、実行されているかどうかを確認します
#输入正在运行的容器
docker ps
#输出所有容器
docker ps -a
コンテナの開閉
#开启
docker start container_name
#关闭
docker stop container_name
eg:docker start development_test
docker stop development_test
②コンテナに入れられるか確認
docker exec -it container_id /bin/bash
eg:docker exec -it 26f41058b7a0 /bin/bash
③vueプロジェクトをパッケージ化してコンテナにアップロード
パッケージング前にvue.config.jsに以下の内容を追加
npm run build
上記のコマンドを実行して、dist コマンドを生成します.
まず、dist ファイルをホスト (サーバー) にアップロードします. xftp を使用してアップロードし、ホストからコンテナーにファイルをコピーします. たとえば、dist
の
パスサーバーは: Sjy_files/development_test/distホスト マシンをコンテナーのホーム ディレクトリにコピーします。
docker cp source_dir container_id:target_dir
eg:docker cp Sjy_files/development_test/dist 26f41058b7a0:/home
コンテナーに入り、nginx 構成を変更します。
コンテナーに入ります。
docker exec -it container_id /bin/bash
nginx の構成を変更する
vim /etc/nginx/conf.d/default.conf
ここでは vim の名声と幸運が報告されていないというエラーが発生します。以下の手順に従ってインストールしてください。
apt-get update
apt-get install sudo
sudo apt-get install vim-gtk
default.conf 編集ページに入ったら、 i を押して編集モードに入ります.
これをコンテナー内の dist が配置されているディレクトリに変更し、esc をダブルクリックし、次のように入力します: q を入力して終了し、構成を再度読み込みます
nginx -s reload
ブラウザを開いて にhttps://ip:portアクセスして
dockers-compose でデプロイする
上記のデプロイでは大きな欠陥が見つかりました. 変更後にプロジェクトを再デプロイする必要がある場合は非常に面倒です. まずパッケージ化されたファイルをサーバーにアップロードする必要があります.サーバーからアップロードします. コンテナに, 構成を変更したい場合は, まずサーバーに入り, 次にサーバーからコンテナに入って変更する必要があります. もっと簡単な方法はありますか? 答えはイエスです.がある！! ! ! ! 、docker-compose を使用してデプロイされます。また、docker-compose がサーバーにインストールされていることを確認してください。インストールされていない場合は、pip を使用してインストールできます。Tsinghua Mirror:-i https://pypi.tuna.tsinghua.edu.cn/simple
上記の development_test プロジェクトを例に取り、サーバー上に development_test という名前のファイルを作成します。そのディレクトリ構造は次のとおりです。
nginx.conf の内容:
#user nobody;
worker_processes 1;
#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;
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /home/dist;
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;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
docker-compose.yml内容
version: '3'
services:
nginx:
image: nginx
ports:
- "8002:80"
volumes:
- "/home/amax/Sjy_files/development_test/nginx_conf/nginx.conf:/etc/nginx/nginx.conf"
- "/home/amax/Sjy_files/development_test/page_dir/dist:/home/dist"
container_name: development_test1
cd で development_test ディレクトリに移動し、
次を実行します。
#创建并运行容器
docker-compose up
#创建并在后台运行容器
docker-compose up -d
ファイルが最初に変更された場合
docker-compose down
それから
docker-compose up
docker-compose デプロイメントを使用する利点は、最初にコンテナーに渡された dist ファイルと、コンテナーで変更される構成ファイルがハングするため、コンテナーに入って操作する必要がないことです。